今天我们依然来做一个比较简单的 CSS3 动画 - 五彩风车随风旋转. 这个动效和上一篇教程一样, 仅使用 CSS3 完成. 我们使用了一些常见的 CSS3 动画技巧, 再加上传统 CSS 的三角形制作手法, 就完成了风车随风旋转的效果:
前端代码
html 代码:
- <div id="effect-windmill">
- <div class="blade-container">
- <div class="blade-item"></div>
- <div class="blade-item"></div>
- <div class="blade-item"></div>
- <div class="blade-item"></div>
- </div>
- <div class="pole"></div>
- </div>
CSS3 代码:
- #effect-windmill {
- position: relative;
- margin: auto;
- margin-top: 80px;
- width: 300px;
- height: 450px;
- }
- #effect-windmill> .blade-container {
- position: absolute;
- display: flex;
- flex-flow: column wrap;
- width: 300px;
- height: 300px;
- overflow: hidden;
- z-index: 20;
- animation: wind 10s linear 3s infinite;
- -webkit-animation: wind 10s linear 3s infinite;
- }
- #effect-windmill> .blade-container> .blade-item {
- width: 0;
- height: 0;
- }
- #effect-windmill> .blade-container> .blade-item:nth-child(1) {
- border-right: 150px solid transparent;
- border-bottom: 150px solid #e74c3c;
- }
- #effect-windmill> .blade-container> .blade-item:nth-child(2) {
- border-left: 150px solid transparent;
- border-bottom: 150px solid #e67e22;
- }
- #effect-windmill> .blade-container> .blade-item:nth-child(3) {
- border-right: 150px solid transparent;
- border-top: 150px solid #f1c40f;
- }
- #effect-windmill> .blade-container> .blade-item:nth-child(4) {
- border-left: 150px solid transparent;
- border-top: 150px solid #2ecc71;
- }
- #effect-windmill> .pole {
- position: absolute;
- margin: auto;
- left: 0;
- right: 0;
- bottom: 0;
- width: 5px;
- height: 300px;
- background-color: #3498db;
- z-index: 10;
- }
- @keyframes wind {
- from {
- transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- }
- to {
- transform: rotate(-3600deg);
- -webkit-transform: rotate(-3600deg);
- -moz-transform: rotate(-3600deg);
- -ms-transform: rotate(-3600deg);
- -o-transform: rotate(-3600deg);
- }
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程, 学习工具, 职业规划 )
知识点提炼
风车的旋转效果使用了 CSS3 中的 animate 属性, 然后配合 keyframe 改变风车叶片容器的 transform 属性达到旋转效果, 请注意这里旋转的只是风车叶片的外围容器.
风车叶片使用了 CSS3 的 flex 布局, 我们设置 flex 布局自动换行, 这样只需要一组样式就能让四个叶片到达规定位置, 省了很多代码.
我们给每个叶片单独添加样式时, 使用了 nth-child 伪类选择器, 这个选择器最大的好处是, 不需要给每个叶片单独定制 class, 只需要根据自身序号写出样式即可.
传统 CSS 的三角形制作方法是设置一个宽度很大的 border 属性, 以此来模拟三角形. 这里的三角形也是这么做出来的, 感兴趣的可以详细了解 border 制作三角形的方法.
来源: http://www.jianshu.com/p/8fa19c817022