<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 山谷 日落 风车</title>
<style>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
content: '';
diplay: block;
position: absolute;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
background: #593c1e;
}
.landscape {
position: relative;
height: calc(100vh - 50px);
background: #db9;
overflow: hidden;
}
.landscape div {
position: absolute;
}
.sun {
left: 50%;
bottom: 180px;
width: 150px;
height: 150px;
margin-left: 200px;
border-radius: 50%;
background: orange;
}
.level {
left: 50%;
width: 2000px;
height: 2000px;
border-radius: 50%;
}
.l1 {
bottom: -1850px;
margin-left: -1100px;
background: #d0a273;
}
.l2 {
bottom: -1700px;
margin-left: -300px;
background: #c4884d;
}
.l3 {
bottom: -1900px;
margin-left: -800px;
background: #a66e37;
}
.l4 {
bottom: -1800px;
margin-left: -1700px;
background: #80552a;
}
.windmill {
width: 2px;
}
.windmill .turbine {
top: -5px;
left: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-animation: 7s rotate infinite linear;
animation: 7s rotate infinite linear;
}
.windmill .t {
left: 2px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
}
.windmill.s1 {
width: 2px;
height: 15px;
}
.windmill.s1 .t {
top: -2px;
left: 4px;
width: 2px;
height: 7px;
border-width: 0;
}
.windmill.s2 {
height: 20px;
}
.windmill.s2 .t {
top: -10px;
border-bottom-width: 12px;
}
.windmill.s3 {
height: 35px;
}
.windmill.s3 .t {
top: -18px;
border-bottom-width: 20px;
}
.windmill.s4 {
height: 50px;
}
.windmill.s4 .t {
top: -28px;
border-bottom-width: 30px;
}
.l1 .s1 {
background: #d0a273;
}
.l1 .s1 .t {
background: #d0a273;
}
.l2 .s2 {
background: #c4884d;
}
.l2 .s2 .t {
border-bottom-color: #c4884d;
}
.l3 .s3 {
background: #a66e37;
}
.l3 .s3 .t {
border-bottom-color: #a66e37;
}
.l4 .s4 {
background: #80552a;
}
.l4 .s4 .t {
border-bottom-color: #80552a;
}
.s1:nth-child(1) {
top: -8px;
left: 870px;
}
.s1:nth-child(2) {
top: -15px;
left: 970px;
}
.s1:nth-child(3) {
top: -12px;
left: 1070px;
}
.s2:nth-child(1) {
top: 120px;
left: 485px;
}
.s2:nth-child(2) {
top: 82px;
left: 555px;
}
.s2:nth-child(3) {
top: 46px;
left: 635px;
}
.s3:nth-child(1) {
top: -12px;
left: 780px;
}
.s3:nth-child(2) {
top: -32px;
left: 940px;
}
.s3:nth-child(3) {
top: -28px;
left: 1120px;
}
.s4:nth-child(1) {
top: -30px;
left: 1200px;
}
.s4:nth-child(2) {
top: 23px;
left: 1380px;
}
.s4:nth-child(3) {
top: 122px;
left: 1560px;
}
.t1 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.t2 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.t3 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class='landscape'>
<div class='sun'></div>
<div class='level l1'>
<div class='windmill s1'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s1'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s1'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
<div class='level l2'>
<div class='windmill s2'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s2'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s2'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
<div class='level l3'>
<div class='windmill s3'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s3'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s3'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
<div class='level l4'>
<div class='windmill s4'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s4'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s4'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
</div>
</body>
</html>
纯CSS3实现的山谷日落风车动画效果源码.zip （1个子文件） 
132689834313068405 
index.html 7KB资源评论
易小侠
- 粉丝: 6592
- 资源: 9万+
最新资源
- Delphi 12 控件之RadiantShapes-290-1.5-For-12.0.zip
- springboot乡镇小区管理系统（附源码+数据库）73685
- 80个商业策划PPT模板
- MATLAB实现相机标定
- GDAL-3.8.4-cp311-cp311-win-arm64
- GDAL-3.9.2-cp310-cp310-win-amd64.whl
- CMake设置VS生成Release项目时启动调试信息
- Win32烧录工具-Portable版本
- 【java毕业设计】springboot的学业跟踪评价系统（springboot+vue+mysql+说明文档）.zip
- 【java毕业设计】SpringBoot的校园招聘网站（springboot+vue+mysql+说明文档）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
