记事本写heml文件,实现樱花雨
时间: 2023-06-04 15:08:48 浏览: 295
简单制作樱花雨.txt
很高兴能为您解答问题。关于您的问题,我可以告诉您如下的答案:
您可以使用记事本编写HTML文件,实现樱花雨效果,具体的实现方式如下:
首先,在HTML文件中加入以下代码:
```
<html>
<head>
<title>樱花雨效果</title>
<style>
body {
background-color: #F8F8F8;
background-image: url("https://cdn.jsdelivr.net/gh/twbs/icons@main/icons/sun.svg");
}
.sakura-wrap {
position: fixed;
top: -50%;
width: 100%;
height: 100%;
}
.sakura {
position:absolute;
border-radius: 100%;
-webkit-animation-name: sakura-fall;
animation-name: sakura-fall;
-webkit-animation-duration: 12s;
animation-duration: 12s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
}
@keyframes sakura-fall {
0% {
-webkit-transform: translate(0,-10%) rotate(0deg);
transform: translate(0,-10%) rotate(0deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: translate(30vw,100vh) rotate(360deg);
transform: translate(30vw,100vh) rotate(360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
80%,100% {
transform: translate(50vw,200vh) rotate(720deg);
transform: translate(50vw,200vh) rotate(720deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="sakura-wrap">
<span class="sakura" style="
width: 10px;
height: 10px;
background-color: #fff;
top: 0%;
left: 5%;
-webkit-animation-delay: 0s;
animation-delay: 0s;
"></span>
<span class="sakura" style="
width: 20px;
height: 20px;
background-color: #fff;
top: -10%;
left: 15%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
"></span>
<span class="sakura" style="
width: 14px;
height: 14px;
background-color: #fff;
top: -20%;
left: 25%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
"></span>
<span class="sakura" style="
width: 12px;
height: 12px;
background-color: #fff;
top: -30%;
left: 35%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
"></span>
<span class="sakura" style="
width: 20px;
height: 20px;
background-color: #fff;
top: -40%;
left: 45%;
-webkit-animation-delay: 0s;
animation-delay: 0s;
"></span>
<span class="sakura" style="
width: 14px;
height: 14px;
background-color: #fff;
top: -50%;
left: 55%;
-webkit-animation-delay: 5s;
animation-delay: 5s;
"></span>
<span class="sakura" style="
width: 18px;
height: 18px;
background-color: #fff;
top: -60%;
left: 65%;
-webkit-animation-delay: 3s;
animation-delay: 3s;
"></span>
<span class="sakura" style="
width: 10px;
height: 10px;
background-color: #fff;
top: -70%;
left: 75%;
-webkit-animation-delay: 7s;
animation-delay: 7s;
"></span>
<span class="sakura" style="
width: 12px;
height: 12px;
background-color: #fff;
top: -80%;
left: 85%;
-webkit-animation-delay: 1s;
animation-delay: 1s;
"></span>
</div>
</body>
</html>
```
接下来,将上述代码保存为HTML文件,命名为sakura.html。
最后,用浏览器打开sakura.html文件,您就可以看到樱花雨效果了。
希望这个回答能帮到您,如有任何疑问,欢迎提问。
阅读全文