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

最新推荐文章于 2024-07-29 14:14:21 发布

淘气↘孩ゑ争气ふ

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量833

点赞数

分类专栏：个人技术类文章标签： html

本文链接：https://blog.csdn.net/qq_44563258/article/details/86545052

版权

本文介绍了如何使用CSS3实现无限循环动画效果，包括缩放、旋转等，并展示了如何通过CSS鼠标伪类改变元素在鼠标悬停时的样式，如背景颜色和文字颜色的变化。内容中提到了关键帧动画的设置方法以及动画时间和速度的调整。

摘要由CSDN通过智能技术生成

                                    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%，