CSS完成简单的动画效果

2024-02-21 22:37:58

网页中，需要制作一些动画，来丰富你的网页，如果你会用flash的话，自然是极好的，不过，插个题外话，Adobe Flash Player在2020年已经宣布停止更新支持，flash似乎在不久后将会停用。那么如何使用CSS来完成网页的动画效果制作呢？

下面来看一下基本的步骤：

首先，需要在样式中设置一个动画帧，其语法格式为:

@keyframes 动画帧名字

{0%{}

50%{}

100%{}

}

数值可以有很多个，只要在0%到100%之间都行，他代表的是动画在%数值的状态（目的区域和形状大小等）

其次，在所需要使用的盒子上，调用该动画帧，其语法格式为：

选择器中添加属性

{animation: 动画帧名;

animation-duration:完成动画的时间（要加单位，s或者ms）;

animation-其他和动画帧设置有关的属性

}

了解了上述动画帧属性的基本用法后，下面我们来看实现:

本次实现的动画效果如下：

由于没有上传视频，就简单的用一个文字描述了：一个圆形，向右移动后变为正方形，又向右移动变为圆形，然后向左移动变为正方形，在向左移动变为圆形。

具体代码如下：

<!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>关卡7</title>
</head>
<style>
    #bigbox
    {
        height: 300px;
        width: 700px;
        background-color: #08ECD9;
        margin: auto auto;
    }
    #box1
    {position: relative;
    height: 100px;
    width:100px;
    border-radius: 80%;
    background-color: #E06D6D;
    top:75px;
    animation: move;
    animation-duration: 3s;  /*完成动画的时间*/
    animation-direction: alternate;/*设置动画是可以倒过来来回播放的*/
    animation-iteration-count: 4;/*设置动画的来回播放次数，一来一回count计数为2*/
    }

    @keyframes move
    {
        0%{
            transform:translate(0px,0px);
        }
        50%
        {
            transform:translate(300px,0px);
            background-color: #E06D6D;
            border-radius: 0%;
        }
        100%
        {
            transform:translate(600px,0px);
            background-color: #ecd507;
        }

    }
</style>

<body>
    <div id="bigbox">
        <div id="box1"></div>
    </div>
</body>
</html>

其中animation-动画相关设置,可以参考:w3cschool。

网址为：https://www.w3school.com.cn/

码农公寓

相关文章