css3旋转动画循环效果(无限循环旋转动画)
要写一个无限循环旋转动画酷炫效果，就要用到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> 除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/css3/335.html
原文地址：https://tangjiusheng.cn/css3/335.html