CSS3无限循环动画+CSS鼠标伪类

                                    CSS3无限循环动画+CSS鼠标伪类
                               开发工具与关键技术：Adobe Dreamweaver CC 2018
                              作者：杨灵武
                         撰写时间：2019/01/17
~~~~~~~~

下面是一个CSS3无限循环动画效果
1：统一把参数设置一样

2: animation: o 2s infinite;
@-webkit-keyframes o {
10% {width: 0px;height: 0px;}/缩放/
} 2秒完成一次缩放，无限循环
实现的效果在这里是看不到的
（详情见截图）

3: 上面分别给了它们四个不同的颜色值，你也可以写border-radius:（任意度数或者PX）让它们有一个弧度的呈现，
我们可以看到上面的-webkit-animation:ying 10.0001s infinite; 是用来调节时间和速度的快慢的，（时间任意）
@-webkit-keyframes ying {
.20%，90%，30%{
-webkit-transform:rotate(360deg);
}
} 用来调节你想要让它转动的度数（任意度数），前面的 % 可以让代码在那个节点停留，根据你给的总时间的大小来决定。
（详情见截图）

4: .dd:hover .cc{
background-color:rgba(0,0,0,0.8);
color:rgba(255,255,255,1);
} 我们在这里先给cc一个鼠标移动上去背景图片和文字颜色发生变化的伪类
transition:all 3s ease-in;
color:rgba(0,0,0,1.00); 结合这两句就能完成这个效果，
-webkit-animation:ow 8s infinite;
和@-webkit-keyframes ow {
25% ,50% {
-webkit-transform:rotate(-360deg);/顺时针旋转/
}
} 的效果和图5基本一样，详情请参考上面
（详情见截图）

5:下面是网页输出页面;