css-动画animation

最新推荐文章于 2024-05-23 22:54:35 发布

零OO

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量944

点赞数

分类专栏：前端文章标签： css 动画 html5

本文链接：https://blog.csdn.net/qq_39111074/article/details/119904759

版权

前端专栏收录该内容

220 篇文章 8 订阅

订阅专栏

animation动画属性的使用方法

步骤一：定义动画

@keyframes 动画名称 {}

@keyframes 动画名称 {
0% {}
70% {
···
}
100% {
···
}
}
里面的百分比是定义的时间节点，定义这个时间下元素的状态，
例如动画总时间为 2秒，则0%代表初始时间，70%代表 2S * 70% = 1.4s 时，100% 代表动画结束时间

步骤二：使用动画

在要使用动画的元素里面添加animation属性
可以分开写，也可以简写
animation是综合写法：顺序为如下：
animation: name duration timing-function delay iteration-count direction fill-mode;
animation-name等是单独指出动画的相关信息
其中：animation-name 和 animation-duration 这两个是必需要写的

animation-timing-function默认是：animation-timing-function：ease
想要匀速的话：animation-timing-function：linear

animation-iteration-count默认是：animation-iteration-count：1（动画效果展示一次后停止）
想要一直动画效果：animation-iteration-count：infinite（无限循环）

有时需要鼠标放在动画上时，动画效果停止，可以设置鼠标悬浮时，元素：animation-play-state：paused

想要动画执行后停止在结束状态：animation-fill-mode：forwards

设置分几步完成动画：animation-timing-function：steps(步数) - - - 这个是匀速变化的

更多使用方法可以查阅CSS手册，或上网查询

动画使用示例

示例1：地图

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

<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>动画--地图案例</title>
    <style>
        body {
            background-color: #f0e1ce;
        }
        
        .map {
            position: relative;
            width: 600px;
            height: 350px;
            margin: 100px auto;
            background: url(images/地图.jpg) no-repeat center/600px 350px;
        }
        
        .city {
            position: absolute;
            top: 200px;
            left: 361px;
        }
        
        .point {
            position: absolute;
            top: 8px;
            left: -8px;
            width: 6px;
            height: 6px;
            background-color: #fff;
            border-radius: 50%;
        }
        
        .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            box-shadow: 0 0 12px #fff;
            border-radius: 50%;
            opacity: 1;
            /* 使用动画：
            animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: pulse 1s linear 0s infinite;
        }
        
        .city div.pulse2 {
            animation-delay: .2s;
        }
        
        .city div.pulse3 {
            animation-delay: .4s;
        }
        /* 定义动画 */
        
        @keyframes pulse {
            0% {}
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <span>湖北</span>
            <div class="point">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
        </div>
    </div>
</body>

</html>

原理：
一个实心点+3个圈，圈不给边框，给阴影，圈的大小和实心点一致，给3个圈加上变大的动画效果，第2个和第3个圈依次延时发生动画，圈从开始的透明度为1（即不透明），中间变化时透明度为1，到结束时透明度为0（即完全透明），
最后产生由坐标中心向外扩散波动的页面效果

页面效果：

地图.gif

示例2：奔跑的小熊

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

<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>动画-奔跑的小熊</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .mountain1 {
            height: 600px;
            /* background-color: #fff; */
            background: url(images/云1.jpg) no-repeat 0 bottom;
            /* 使用动画 */
            animation: bg-move 20s linear infinite;
        }
        
        .mountain2 {
            height: 600px;
            background: url(images/bg1.png) no-repeat 0 bottom;
            /* 使用动画 */
            animation: bg-move 15s linear infinite;
        }
        
        .bear {
            position: absolute;
            top: 500px;
            left: 0;
            width: 200px;
            height: 100px;
            background: url(images/bear.png) no-repeat;
            /* 使用动画 */
            animation: bear-run .8s steps(8) infinite, bear-move 10s forwards;
        }
        /* 定义动画 */
        
        @keyframes bear-run {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes bear-move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
        
        @keyframes bg-move {
            0% {
                background-position: 0 bottom;
            }
            100% {
                background-position: right bottom;
            }
        }
    </style>
</head>

<body>
    <div class="mountain1">
        <div class="mountain2">
            <div class="bear"></div>
        </div>
    </div>
</body>

</html>

小熊的图片为：

原理：
小熊作为背景图，整个图为8个小熊，宽1600px,，每个小熊200px，使小熊背景图向左移动，即改变background-position的值，分8步移动完整个小熊背景图，每一步一个动作，连起来就成了动画
可以同时使用多个动画，多个动画使用逗号隔开，小熊从左跑到中间后停止向前，停在屏幕中央原地奔跑，让后面的山等背景向左移动，就产生了小熊一直在向前跑的视觉效果

页面效果：

奔跑的小熊2.gif

最后小熊会跑到中央：

奔跑的小熊3.gif

零OO

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css-动画animation

animation动画属性的使用方法步骤一：定义动画@keyframes 动画名称 {}@keyframes 动画名称 {0% {}70% {···}100% {···}}里面的百分比是定义的时间节点，定义这个时间下元素的状态，例如动画总时间为 2秒，则0%代表初始时间，70%代表 2S * 70% = 1.4s 时，100% 代表动画结束时间步骤二：使用动画在要使用动画的元素里面添加animation属性可以分开写，也可以简写animation是综合写法：顺序为如下：a
复制链接

扫一扫