企业内部网站建设,工厂怎么推广自己的产品,加强文明网站内容建设,苏州seo怎么做如何用css3实现简单旋转的风车 在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转#xff0c;其实也没什么难度的。先设置它的样式#xff0c;然后要用定位把它放到合适的位置就可以了。 HTML的代码如下#xff1a;
div classfengchediv…如何用css3实现简单旋转的风车 在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转其实也没什么难度的。先设置它的样式然后要用定位把它放到合适的位置就可以了。 HTML的代码如下
div classfengchediv classzhu/divdiv classzhuandiv classz/divdiv classxiaoyan/divdiv classz1/divdiv classz2/divdiv classz3/divdiv classz4/div/div/div名字你们不要学我这样给啊命名一定要标准我这个是刚学的时候打的只是懒得改了。 Css的代码如下
.fengche{position: relative;
}
.zhuan{width: 300px;height: 300px;position: relative;clear: both;animation: zhuan 6s linear infinite;
}
keyframes zhuan{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
.z{width: 50px;height: 50px;margin: 0px;background: #B5B5B5;border-radius: 50%;position: absolute;top: 126px;left: 125px;
}
.xiaoyan{width: 20px;height: 20px;margin: 0px;background:#C8C8C8;border-radius: 50%;position: absolute;top: 140px;left: 140px;
}
.z1,.z3{width: 40px;height: 135px;background: #EBF453;border-radius: 50%;
}.z1{position: absolute;top: -35px;left: 110px;
}
.z3{position: absolute;bottom: -35px;left: 110px;
}
.z2,.z4{width: 135px;height: 40px;background: #EBF453;border-radius: 50%;
}
.z2{position: absolute;top: 115px;left: 160px;
}
.z4{position: absolute;top: 115px;right: 160px;
}
.zhu{width: 30px;height: 300px;background: #82BDD5;position: absolute;top: 81.5%;left: 135px;border-radius: 35% 35% 0 0;
}
代码就这么多下面让我们看下实现的效果图 不要问我为啥那么丑我的技术还不够你们要是有什么更好的方法一定要跟我说一下大家一起进步嘛毕竟我也是初学者所以欢迎大家来评论づ3づ╭❤
