在前端方面我们大大小小都会遇到动画

咱们简单做一个2.5d视觉的旋转动画

主要用到 @keyframes 和 animation 这两个

一些不理解的同学可以就当@keyframes是个函数

而”animation“他就是来调用"@keyframes"的

***当然这是我的个人理解，每个人有不同的看法仅供参考***

@keyframes来定义这个动画开始时候是什么角度

到结束的时候又是什么角度 最简单就是通过百分比来控制

然而 animation这个样式也有多个属性

本篇文章一共用到了四个值现在来介绍讲解一下

第一个就是要调用"@keyframes"的名字

第二个就是控制几秒执行一次 ,例如写 1s 那就是一秒是这次动画的执行时间,从0%-100%只用1秒

第三个就是速度曲线 有以下几个值

  • linear：‌匀速运动，‌动画从头到尾的速度是相同的
  • ease：‌慢-快-慢的速度曲线，‌开始和结束时速度较慢，‌中间时速度较快
  • ease-in：‌慢进，‌动画开始时速度较慢，‌然后逐渐加快
  • ease-out：‌慢出，‌动画结束时速度较慢，‌开始时速度较快
  • ease-in-out：‌慢进慢出，‌动画开始和结束时速度较慢，‌中间时速度较快
  • cubic-bezier(？,？,？,？)：‌使用曲线自定义动画的运行曲线，‌其中？的取值范围是0-1

而第四个值就是循环次数

  • 属性的值为正整数时，‌表示动画将播放指定的次数。‌如果设置为5，‌那动画将播放5次。
  • 当值为infinite时，‌动画将无限次地循环播放。‌这意味着动画将一直持续下去，‌直到被外部因素（‌如用户操作或代码控制）‌停止。‌

很多小伙伴可能不懂 看代码就明白了 

复制到新的html文件直接在浏览器打开就可以看见效果了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: gray;
        }

        .loader {
            top: 20%;
            left: 40%;
            position: absolute;
            width: 40vw;
            height: 40vw;
            border-radius: 50%;
        }

        .inner {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .inner.one {
            left: 0%;
            top: 0%;
            animation: rotate-one 1s linear infinite;
            border-bottom: 9px solid fuchsia;
        }

        .inner.two {
            right: 0%;
            top: 0%;
            animation: rotate-two 1s linear infinite;
            border-right: 9px solid greenyellow;
        }

        .inner.three {
            right: 0%;
            bottom: 0%;
            animation: rotate-three 1s linear infinite;
            border-top: 9px solid aqua;
        }

        @keyframes rotate-one {
            0% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-two {
            0% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-three {
            0% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <div class="inner one"></div>
        <div class="inner two"></div>
        <div class="inner three"></div>
    </div>
</body>

</html>

# css3 # 前端 # css
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Js分割字符串(单个分割符、多个分割符、正则)

1.单个分割符1.1定义和用法split() 方法用于把一个字符串分割成字符串数组。1.2语法stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，

avatar 腾讯云开发者社区

curl

什么是curl命令？curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。如何在windows下使用curl命令？第一步： 进入curl下载官网，下载合适的版本，我这里下载的是windows 64位的curl。其中我下载的zip文件。 另外CAB文件也是压缩文件，这...

avatar 腾讯云开发者社区

Zynq7000 USB2.0协议解析及USB控制器详解

USB 2.0规范及控制器文章目录USB 2.0规范及控制器USB2.0Univerasl Serial BusUSBHostUSB总线接口标准总线信号USB拓扑结构数据流模型数据编解码和位填充USB逻辑部件USB时间基准USB 描述符USB设备USB设备供电方式USB设备分层USB设备插入检测机制USB设备状态USB总线枚举USB传输传输类型包(Packet)事务(transaction)传输(

avatar 腾讯云开发者社区