如何利用CSS3动画做出精美的样式（基础篇1）
如何利用CSS3动画做出精美的样式（基础篇1）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：DW/CSS3动画
作者：余智强
撰写时间：2019.1.17
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS是网页设计师和前端人员需要了解和学习的一门语言，特别是现在很多网页使用扁平化设计，这类设计风格大部分布局、交互动画甚至是图标都会使用高级点的CSS3技能，所以我们应该熟练掌握CSS这门样式语言。下面我就分享一下我所掌握的一些CSS3知识（我是小白求轻喷）。
一、风车
说到风车就想到儿时的大风车，如下图：
看起来是十分的简单，实际上也是十分的简单。风车四叶，其实就是四个块级元素。要做出半圆的效果，代码如下：
width: 0px;
height: 0px;
border: 150px solid red;
border-radius: 50%;
border-color: red red transparent transparent;
具体就是先放一个大的容器级标签（不了解容器级标签的可以看我上一篇文章，****个人博客https://blog.****.net/weixin_44541467/article/details/86515076），
<div class="fcs">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
</div>
然后在其中放四个小的（风车四叶）将其拼接成风车的图案（多种方法）。可以笨拙的用定位直接拼接。我用的是将四叶（相同标签）绝对定位，然后用transform:rotate(***deg)（旋转）将其散开成风车图案（更精确）。
其后便是利用CSS3动画做到风车的特性—旋转，给大容器加上：
.fcs{
width: 600px;
height: 600px;
position: absolute;
top: 800px;
left: 459.6px;
}
.fcs:hover{
transform: rotate(36000deg);
transition-duration: 100s;
}
这里我用hover达到触发动画的效果。好了，这里用到的都是最基础知识（适于新手）。
二、花
这是最简单的红花：
制作的方法也很简单，和风车大同小异。唯一有点特别的就是花瓣了，花瓣效果我用了旋转加扭曲制成：
.y{
width: 100px;
height: 200px;
border-radius: 90% 0%;
background: #f00;
transform:rotate(-50deg) skewX(-37deg);
margin:0 0 27px 13.5px;
}
而因为加了扭曲，旋转散开的的效果就无法达到。这里我用了给花瓣再包裹一层容器解决：
.yy{
width: 58px;
height: 305px;
position:absolute;
top: -261px;
left: -14px;
/*background: #0f0;*/
transform-origin: bottom right;
}
，再给容器加上旋转以散开。（花瓣太多还是很繁琐）.花心其实就是最大的盒子（通过定位），同样是用hover触发：
.h{
width:88px;
height:88px;
border-radius: 50%;
background:#D7c919;
transition: transform 100s linear;
position: relative;
top:1838px;
left:715.6px;
}
.h:hover{
transform: rotate(3600deg);
}
好了，本文就到此结束（我是小白求轻喷）。