要写一个无限循环旋转动画酷炫效果，就要用到css3的动画属性animation，轻松写出一个css3旋转动画循环效果。在animation里定义了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会停止，用到了animation-play-sta
要写一个无限循环旋转动画酷炫效果，就要用到css3的动画属性animation，轻松写出一个css3旋转动画循环效果。在animation里定义了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会停止，用到了animation-play-state属性。
一、css3旋转动画循环效果，看图所示：
说明：在animation里定义了一个rote360的动画，在X轴方向无限循环，鼠标悬停在上面时动画会停止，用到了animation-play-state属性。
二、animation-play-state属性：
规定动画正在运行还是暂停。
1、语法：animation-play-state: paused|running;
2、属性值：
1）paused：规定动画已暂停。
2）running：规定动画正在播放。
三、css3旋转动画循环效果实例完整代码如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3旋转动画循环效果</title> <style type="text/css"> * { margin: 0; padding: 0; } /*定义绕x轴的3d正向旋转动画 */ @keyframes rote360 { from{} to{ transform: rotateX(360deg); } } .nav { position: relative; width: 180px; height: 50px; margin: 50px auto; /*透视距离 */ perspective: 700px; /* 开启子元素的动画显示，否则会和父元素一样 */ transform-style: preserve-3d; /* 使用动画，每2秒旋转一圈，匀速，无限循环 */ animation: rote360 2s linear infinite; } /*鼠标在nav盒子上时动画停止*/ .nav:hover { animation-play-state:paused; -webkit-animation-play-state:paused; cursor: pointer; } /*定义上下，前后四个面 */ .nav .face, .nav .botton, .nav .back, .nav .top { /*1.绝对定位，先使四面重叠放在一块 */ position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: white; font-size: 22px; line-height: 50px; text-align: center; background-color: #008000; } /*2.前面的面向前z轴移动25px */ .nav .face{ transform: translateZ(25px); } /*3.下面先向下移动25px，再x轴负向旋转-90度 */ .nav .botton { background-color: red; transform:translateY(25px) rotateX(-90deg); } /*4.上面先上移动-25px，再x轴正向旋转90度 */ .nav .top { background-color: purple; transform:translateY(-25px) rotateX(90deg); } /*5.后面先后移动-25px，再x轴正向旋转180度 */ .nav .back{ background-color: orange; transform: translateZ(-25px) rotateX(180deg); } </style></head><body> <div> <div>老汤</div> <div>叫你一起学前端</div> <div>老汤</div> <div>叫你一起学前端</div> </div></body></html>
