css实现日落西山太阳下山风车动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现日落西山太阳下山风车动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload=snow;
var int=self.setInterval("snow()",3500);
var int2=self.setInterval("snow2()",4000);
function snow(){
var div=document.createElement("div");
div.className="snow";
var bo=document.body;
bo.insertBefore(div,bo.lastChild);
}
setTimeout("clearInterval(int)",35000);
function snow2(){
var div=document.createElement("div");
div.className="snow2";
var bo=document.body;
bo.insertBefore(div,bo.lastChild);
}
setTimeout("clearInterval(int2)",40000);
</script>
<style>
/* animation-duration: 1s;延时1s */
body{
margin: 0;
height: 100vh;
align-content: center;
justify-content: center;
font-size: 18px;
overflow: hidden;
background-size: 400%;
background-image: linear-gradient(130deg,#d7e7ff,#99dfff,#abe1e0,#99dfff,#d8edff,#ffefe0,#fff7f2,#77acda,#4e74da,#4a74ff,#0d5cda,#694fff);
animation:move 105s infinite linear;
}
@keyframes move{
0%{background-position:0% 0%;}
50%{background-position:100% 400%;}
100%{background-position:0% 0%;}
}
#dimian_all{
position: relative;
width: 100%;
height: 100vh;
backdrop-filter: blur(2px);
}
#dimian1{
position: absolute;
box-sizing: border-box;
top: 15em;
left: 0em;
border-bottom: 20em solid #14222d;
border-top: 20em solid transparent;
border-left: 20em solid #14222d;
border-right: 20em solid transparent;
}
#dimian2{
position: absolute;
width: 100%;
height: 7em;
background: #14222d;
top: 50em;
}
#dimian3{
position: absolute;
width: 40em;
height: 5em;
background: #14222d;
top: 49em;
left: 30em;
border-radius:50% ;
}
#dimian4{
position: absolute;
top: 3em;
left: 45em;
border-bottom: 30em solid #14222d;
border-top: 30em solid transparent;
border-left: 40em solid transparent;
border-right: 80em solid transparent;
transform: rotate(-2deg);
}
#jianzhu{
position: absolute;
top: 17em;
left: 81em;
width: 8em;
border-bottom: 10em solid #14222d;
border-top: 10em solid transparent;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
#jianzhu2{
position: absolute;
top: 9em;
left: 81em;
border-bottom: 8em solid #14222d;
border-top: 10em solid transparent;
border-left: 5em solid transparent;
border-right: 5em solid transparent;
}
#jianzhu2::before{
content: '';
position: absolute;
background: #93e8ff;
width: 1em;
height: 1em;
top: 7.1em;
left: -0.5em;
transform: rotate(45deg);
}
#shu{
position: absolute;
top: 15em;
left: 10em;
border-bottom: 15em solid #14222d;
border-top: 3em solid transparent;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
}
#shu2{
position: absolute;
top: 25em;
left: 17em;
border-bottom: 10em solid #14222d;
border-top: 3em solid transparent;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
}
#shu3{
position: absolute;
top: 27em;
left: 100em;
border-bottom: 15em solid #14222d;
border-top: 3em solid transparent;
border-left: 3em solid transparent;
border-right: 3em solid transparent;
}
#shu4{
position: absolute;
top: 33em;
left: 72em;
border-bottom: 10em solid #14222d;
border-top: 3em solid transparent;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
}
#shu5{
position: absolute;
top: 31em;
left: 94em;
width: 5em;
height: 5em;
border-radius: 50%;
background: #14222d;
}
#shu5::before{
position: absolute;
top: -4em;
left: 0.5em;
content: '';
border-bottom: 2em solid #14222d;
border-top: 3em solid transparent;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
}
#shu5::after{
position: absolute;
top: 3em;
left: 2em;
content: '';
width: 1em;
height: 5em;
background: #14222d;
}
#rota{
position: absolute;
height: 100em;
width: 3em;
top: 0em;
left: 45em;
transform-origin: center center;
z-index: -1;
animation: riyue 105s infinite linear;
}
@keyframes riyue{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
#riyue{
backdrop-filter: blur(10em);
position: absolute;
background: #b6e2ff;
width: 3em;
height: 3em;
top: 0em;
left: 0em;
border-radius: 50%;
filter: blur(1px) opacity(95%);
box-shadow:inset 0px 0px 0px 200px #FFFFFF,
0px 0px 300px #ffffff,
0px 0px 150px #ffffff,0px 0px 100px #ffffff,
0px 0px 200px #ffffff,0px 0px 450px #ffffff,
0px 0px 650px #ffffff,0px 0px 300px #ffffff,
0px 0px 150px #ffffff,0px 0px 100px #ffffff,
0px 0px 200px #ffffff,0px 0px 450px #ffffff,
0px 0px 650px #ffffff;
}
#riyue::before{
backdrop-filter: blur(10em);
position: absolute;
content: '';
width: 4em;
height: 4em;
top: 92em;
left: 0em;
border-radius: 50%;
border-left: 20px solid #ffffff;
filter: blur(1px) opacity(95%) drop-shadow(0px 0px 20px white);
}
#yun1{
position: absolute;
width: 15em;
height: 2em;
top: 10em;
left: 120em;
border-radius: 20em 20em 3em 3em/20em 20em 10em 10em;
background: white;
opacity: 0.4;
z-index: -1;
animation: yun 40s infinite linear;
}
@keyframes yun{
from{ opacity: 0.4;}
to{left: -20em; opacity: 0;}
}
@keyframes yun2{
from{ opacity: 0.4;}
to{left: -40em; opacity: 0;}
}
#yun1::before{
position: absolute;
content: '';
width: 20em;
height: 3.5em;
top: 2em;
left: -2em;
border-radius: 40em;
background: white;
}
#yun1:after{
position: absolute;
content: '';
width: 10em;
height: 6em;
top: -1em;
left: 5.5em;
border-radius: 40em;
background: white;
}
#yun2{
position: absolute;
width: 15em;
height: 2em;
top: 3em;
left: 150em;
border-radius: 20em 20em 3em 3em/20em 20em 10em 10em;
background: white;
opacity: 0.4;
z-index: -1;
animation: yun 50s infinite linear;
}
#yun2::before{
position: absolute;
content: '';
width: 20em;
height: 3.5em;
top: 2em;
left: -2em;
border-radius: 40em;
background: white;
}
#yun2:after{
position: absolute;
content: '';
width: 10em;
height: 6em;
top: -1em;
left: 5.5em;
border-radius: 40em;
background: white;
}
#yun3{
position: absolute;
width: 15em;
height: 2em;
top: 30em;
left: 180em;
border-radius: 20em 20em 3em 3em/20em 20em 10em 10em;
background: white;
opacity: 0.4;
z-index: -1;
animation: yun2 30s infinite linear;
}
#yun3::before{
position: absolute;
content: '';
width: 20em;
height: 3.5em;
top: 2em;
left: -2em;
border-radius: 40em;
background: white;
}
#yun3:after{
position: absolute;
content: '';
width: 10em;
height: 6em;
top: -1em;
left: 5.5em;
border-radius: 40em;
background: white;
}
#yun4{
position: absolute;
width: 15em;
height: 2em;
top: 14em;
left: 140em;
border-radius: 20em 20em 3em 3em/20em 20em 10em 10em;
background: white;
opacity: 0.4;
z-index: -1;
animation: yun 45s infinite linear;
}
#yun4::before{
position: absolute;
content: '';
width: 20em;
height: 3.5em;
top: 2em;
left: -2em;
border-radius: 40em;
background: white;
}
#yun4:after{
position: absolute;
content: '';
width: 10em;
height: 6em;
top: -1em;
left: 5.5em;
border-radius: 40em;
background: white;
}
#yun5{
position: absolute;
width: 15em;
height: 2em;
top: 3em;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0