您的位置：首页 > Web前端 > CSS

CSS3实现风车

2015-09-20 00:59 591 查看

最近在看实验室在做有关风页的事情，于是自己尝试着拿css3写了一个，这个版本的只支持谷歌浏览器和safari浏览器，原因是用到了css3的animation属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>风车</title>
<style type="text/css">
body{
background: #a5cad6;
}
div{
width: 1000px;
margin: 100px auto;
}
.bottom{
border-bottom: 100px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.round{
position: relative;
left: -10px;
top: 15px;
display: inline-block;
background: #a5cad6;
border: 4px solid #fff;
width: 3px;
height: 3px;
border-radius: 6px;
-webkit-animation: shift 4s linear infinite;
}
.round > span {
border-bottom: 50px solid #fff;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
}
.wing1{
top: -11px;
left: 21px;
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-trabsform: rotate(120deg);
transform: rotate(120deg);
}
.wing2{
top: -10px;
left: -27px;
-webkit-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-moz-trabsform: rotate(-120deg);
transform: rotate(-120deg);
}
.wing3{
top: -52px;
left: -2px;
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-trabsform: rotate(0deg);
trabsform: rotate(0deg);
}
@-webkit-keyframes shift{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes shift{
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<span class="bottom"></span>
<span class="round">
<span class="wing1"></span>
<span class="wing2"></span>
<span class="wing3"></span>
</span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航