css3旋转动画循环效果(无限循环旋转动画)

 分类:css3知识时间:2022-05-05点击: 2022前端视频教程(自学必看)

要写一个无限循环旋转动画酷炫效果,就要用到css3的动画属性animation,轻松写出一个css3旋转动画循环效果。在animation里定义了一个rote360的动画,在X轴方向无限循环,鼠标悬停在上面时动画会停止,用到了animation-play-state属性。

一、css3旋转动画循环效果,看图所示:

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>

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: