网站:https://openmao.panchuang.net/
跟其他ChatGPT网站没有什么区别,目前还是免费用的。
下面是网站简单些写的HTML5代码
好的,以下是一份简单的樱花飘落的页面示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>樱花飘落</title>
<style type="text/css">
body {
background-color: #F5DEB3;
margin: 0;
padding: 0;
}
.petals {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #FFF0F5;
box-shadow: 0 0 3px #FF69B4;
animation: petals-fall linear infinite;
transform-origin: top center;
}
@keyframes petals-fall {
0% {
transform: translate(0, -100px) rotate(0deg);
opacity: 1;
}
100% {
transform: translate(calc(100vw * var(--x)), calc(100vh * var(--y))) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- 樱花花瓣 -->
<div class="petals"></div>
<script type="text/javascript">
// 创建樱花花瓣
function createPetals() {
const petal = document.createElement('div');
petal.className = 'petals';
petal.style.setProperty('--x', Math.random());
petal.style.setProperty('--y', Math.random());
petal.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(petal);
setTimeout(() => {
petal.remove();
}, 10000);
}
// 定时创建樱花花瓣
setInterval(createPetals, 100);
</script>
</body>
</html>
代码解释:
- 首先定义了页面的样式,设置了背景色和宽高等。
- 接着定义了樱花花瓣的样式,包括大小、颜色、阴影、动画等。动画通过 keyframes 定义了花瓣从上往下落下的过程。transform 属性实现了花瓣的平移和旋转效果。
- 在页面中添加一个空的
<div>
元素,用来放置樱花花瓣。在 JavaScript 中,通过createElement
方法创建樱花花瓣元素,并设置其类名和样式属性,然后将其添加到页面中。每隔一定时间就创建新的花瓣,同时删除已经飘落到底部的花瓣,以避免占用过多内存。
注意:这只是一个简单的示例,实现效果和性能可能不够优化,可以根据需要进行调整和改进。
Comments 1 条评论
博主 2194372572
第一次用,谢谢