- 一.创建动画效果
- css动画效果创建:
- 百分比(0%、100%)表示动画执行到该进度时运行的样式代码
- @keyframes rotateAnimate1 {
- 0% {transform: rotateX(45deg) rotateZ(0deg);}
- 100% {transform: rotateX(45deg) rotateZ(360deg);}}
- @-webkit-keyframes rotateAnimate1
- 0% {transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
- 100% {transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);}}
- 二.在css选择器中引用
- 代码如下(示例)
- -webkit-animation: rotateAnimate1 2s infinite linear;
- animation: rotateAnimate1 2s infinite linear;
- rotateAnimate1 :上方自己编写的动画名称
- 2s:表示执行的时间(总时间)
- infinite:这里是播放次数;(infinite表示播放无限次,也可以用数字进行代替,代表执行多少次)
- linear:表示执行
- 代码如下(示例)
CSS动画效果
最新推荐文章于 2024-07-27 10:37:47 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)