CSS3 动画

最新推荐文章于 2023-01-11 22:55:16 发布

Bella..

最新推荐文章于 2023-01-11 22:55:16 发布

阅读量1.5k

点赞数 2

分类专栏： html+css 文章标签：动画 css3 css

本文链接：https://blog.csdn.net/weixin_57826863/article/details/122576486

版权

html+css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，自动连续播放等效果。

1.1 动画的基本使用

制作动画分为两步：先定义动画，在使用调用动画

1.用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {

0%{

width:100px;

}

100%{

width:200px;

}

}

动画序列：

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在 @keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%

2.调用动画

animation-name：动画名称；

animation-duration：持续时间；

    <style>
        /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 1.定义动画 */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name:move;
             /* 持续时间 */
             animation-duration: 2s;
        }
    </style>
</head>
<body>
<div></div>
</body>

1.2 动画序列

案例：

  <style>
        /* 动画序列可以做多个状态的变化 keyframe 关键帧*/
        /* 里面的百分比要是整数 */
        /* 里面的百分比就是 总的时间(我们这个案例是10s)的划分 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0, 0);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

1.3 CSS3动画常见属性

倒数第二个属性：

1.4 CSS3动画简写

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束的状态；

name，duration必须要写

animation: myfirst 5s linear(匀速) 2s infinite(无限循环) alternate;

1.5 大数据热点图案例

图片要放在本地才能使用


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
        
        .tb {
      /*把city里的top，right覆盖掉*/
            top: 500px;
            right: 80px;
        }
        
        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            /* 先用 top: 50%;left: 50%;使pulse的左上角位于点的中心， */
            /* 然后translate的位移距离由自身决定，共同作用在中间 */
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        
        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }
        
        @keyframes pulse {
            0% {}
            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 40px;
                height: 40px;
              /*透明度*/
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

1.6 速度曲线细节

steps分步长来走的，实现打字机效果： div里面写十个字就行(设置的每个字20px，一共200px）

Bella..

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 动画

目录1.1 动画的基本使用1.2 动画序列1.3 CSS3动画常见属性1.4 CSS3动画简写1.5 大数据热点图案例1.6 速度曲线细节动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡，动画可以实现更多变化，更多控制，自动连续播放等效果。1.1 动画的基本使用制作动画分为两步：先定义动画，在使用调用动画1.用keyframes定义动画（类似定义类选择器）@keyfra.
复制链接

扫一扫