今天用CSS画了一幅日出日落的动态画,长这个样子
html部分
<body class="body">
<div class="frame">
<div class="sky">
<div class="moon"></div>
<div class="sun"></div>
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>
</div>
<div class="mountains">
<div class="mountain-1">
<div class="mountain-cover"></div>
</div>
<div class="mountain-2">
<div class="mountain-cover"></div>
</div>
<div class="mountain-3">
<div class="mountain-cover"></div>
</div>
<div class="mountain-4">
<div class="mountain-cover"></div>
</div>
</div>
</div>
</body>
css部分
.body {
display: flex;
align-items: center;
justify-content: center;
background-color: blanchedalmond;
height: 100vh;
transition: all 0.25s ease-in;
}
.frame {
height: 400px;
width: 300px;
overflow: hidden;
background-color: #ffffff;
border: 10px solid #cacaca;
box-shadow: 0 0px 60px 0px #3d3d3d;
z-index: 1;
transition: all 0.25s ease-in;
}
.sky {
position: relative;
height: 100%;
width: 102%;
border: 0px;
padding: 0;
/* 透明度渐变 */
/* background-image: linear-gradient(to bottom, rgb(126, 139, 153, 1), rgba(141, 153, 126, 0)); */
background: linear-gradient(to bottom, rgb(2, 39, 80), rgb(2, 39, 80, 0.7), rgb(64, 217, 255), rgb(64, 217, 255, 0.2));
background-size: 100% 200%;
transition: all 1s ease-out;
z-index: -1;
}
.moon {
position: relative;
height: 50px;
width: 50px;
top: 60px;
left: 40px;
border-radius: 100%;
background-color: rgb(126, 139, 153, 0);
box-shadow: 12px 12px 0px 0 rgb(255, 255, 255);
z-index: 1;
transition: all 0.5s ease-in;
}
.star {
position: relative;
border-radius: 100%;
background-color: #ffffff;
box-shadow: 0 0 5px #ffffff;
top: 0;
transition: all 0.25s ease-in 0.25s;
}
.star-1 {
height: 5px;
width: 5px;
top: -5px;
left: 15%;
background-color: rgb(255, 255, 255, .8);
transition: all 0.5s ease-in 0.25s;
}
.star-2 {
height: 6px;
width: 6px;
top: 25%;
left: 20%;
background-color: rgb(255, 255, 255, .9);
transition: all 0.4s ease-in 0.25s;
}
.star-3 {
height: 8px;
width: 8px;
top: -10px;
left: 50%;
background-color: rgb(255, 255, 255, 1);
transition: all 0.55s ease-in 0.25s;
}
.star-4 {
height: 5px;
width: 5px;
top: -30px;
left: 45%;
background-color: rgb(255, 255, 255, .9);
transition: all 0.35s ease-in 0.25s;
}
.star-5 {
height: 6px;
width: 6px;
top: 10px;
left: 75%;
background-color: rgb(255, 255, 255, .6);
transition: all 0.45s ease-in 0.25s;
}
.mountain-cover {
height: 100%;
width: 100%;
transition: all 1s ease-out;
background-color: rgba(0, 0, 0, 0.5);
}
.sun {
position: absolute;
height: 50px;
width: 50px;
top: 60%;
right: 40px;
border-radius: 100%;
background-color: rgb(255, 217, 0);
box-shadow: 0 0 10px 0 rgb(255, 217, 0);
z-index: 3;
transition: all .25s ease-out;
}
.frame:hover {
transition: all 0.5s ease-in 0s;
border: 10px solid #ffffff;
transform: scale(1.1) translateY(-10px);
box-shadow: 0 20px 80px -20px #3d3d3d;
}
.frame:hover .sun {
transition: all 0.5s ease-in 0.5s;
top: 10%;
}
.frame:hover .moon {
transition: all 0.5s ease-out;
top: 60%;
}
.frame:hover .sky {
transition: all 1s ease-out 0s;
background-position: 100% 125%;
}
.frame:hover .star {
transition: all 0.5s ease-out .25s;
transform: translateY(200px);
}
.frame:hover .mountain-cover {
transition: all 1s ease-out;
background-color: rgba(255, 255, 255, 0.2);
}
.mountains {
position: relative;
height: 100%;
width: 100%;
top: -100%;
background-color: rgb(255, 255, 255, 0);
z-index: 2;
}
.mountain-1 {
position: relative;
height: 50%;
width: 200%;
top: 55%;
transform: rotate(-20deg);
background-color: rgb(19, 69, 85);
z-index: 5;
}
.mountain-2 {
position: relative;
height: 100%;
width: 200%;
top: 20%;
left: -24%;
transform: rotate(45deg);
background-color: rgb(96, 127, 138);
z-index: 4;
}
.mountain-3 {
position: relative;
height: 50%;
width: 200%;
top: -60%;
left: -40%;
transform: rotate(45deg);
background-color: rgb(171, 181, 185);
z-index: 3;
}
.mountain-4 {
position: relative;
height: 50%;
width: 200%;
top: -100%;
left: -25%;
transform: rotate(25deg);
background-color: rgb(68, 52, 83);
z-index: 6;
}