首页 > 代码库 > 会动的大风车（css3）
会动的大风车（css3）
今天用css3的写了一个会动的大风车，使用translate和rotate布局，使用animation制作动画效果；分享给大家
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
body,html{
width: 100%;
height: 100%;
overflow:hidden;
}
@keyframes move{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
#box{
width:200px;
height:200px;
margin:100px auto;
position:relative;
-webkit-animation:4s move linear infinite running;
}
#box div{
width: 100px;
height: 50px;
border-radius:0 0 50px 50px;
-webkit-transform-origin:right center;
position:absolute;
}
.red{
background:-webkit-radial-gradient(right,circle,red,#000);
transform:translateX(100px) translateY(100px);
}
.yellow{
background:-webkit-radial-gradient(right,circle,yellow,#000);
transform:translateX(-25px) translateY(175px) rotateZ(90deg);
}
.blue{
background:-webkit-radial-gradient(right,circle,blue,#000);
transform:translateX(-100px) translateY(50px) rotateZ(180deg);
}
.green{
background:-webkit-radial-gradient(right,circle,green,#000);
transform:translateX(25px) translateY(-25px) rotateZ(-90deg);
}
#box .dot{
width: 20px;
height: 20px;
background:-webkit-radial-gradient(rgba(255,255,255,1),rgba(0,0,0,1));
border-radius:50%;
top:50%;
left:50%;
margin:-10px 0 0 -10px;
}
</style>
</head>
<body>
<div id="box">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="dot"></div>
</div>
</body>
</html>
会动的大风车（css3）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。