html CSS3中animation动画

最新推荐文章于 2024-05-15 10:37:51 发布

转弯_gqr

最新推荐文章于 2024-05-15 10:37:51 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/guoqingru0311/article/details/118960734

版权

CSS3中animation动画

1、代码示例：
2、风车旋转
3、loading加载动画效果

在这里插入图片描述

1、代码示例：

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation动画</title>
    <style type="text/css">
        /*先定义动画*/
        @keyframes moving {
            from{
                width: 200px;
            }
            to{
                width: 500px;
            }
        }
        .box0{
            width: 200px;
            height: 200px;
            background-color: gold;

            /*动画播放设置参数*/
            animation: moving 1s ease 0s infinite normal;
            /*动画名称，动画完成时间，缓冲,延迟时间，播放次数，动画结束是否还原*/
        }
        .box0:hover{
            animation-play-state: paused;   /*表示鼠标放上去立马暂停*/
        }
    </style>
</head>
<body>
    <div class="box0"></div>
</body>
</html>

显示效果如下：
在这里插入图片描述

2、风车旋转

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风车动画</title>
    <style type="text/css">

        @keyframes rotating {
            from{
                transform:rotate(0deg) ;
            }
            to{
                transform: rotate(360deg);
            }
        }

        .fengche{
            display: block;
            width: 400px;
            height: 400px;
            margin: 50px auto 0;

            /*设置动画参数*/
            animation: rotating 100ms linear  infinite;
            /*动画方式，动画时间，匀速运动，无限运动*/
        }
    </style>
</head>
<body>
    <img src="./images/fengche.png" alt="风车动画" class="fengche">
</body>
</html>

效果如下所示：
在这里插入图片描述

3、loading加载动画效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53_loading动画</title>
    <style  type="text/css">

        @keyframes loading {
            from{
                transform: scale(1,1);
            }
            to{
                transform: scale(1.0,0.5);
            }
        }
        .con{
            width: 300px;
            height: 158px;
            border: 2px solid black;
            margin: 150px auto;
        }
        .con div{
            height: 100px;
            width: 30px;
            float: left;
            background-color: #f0ad4e;
            margin: 15px;
            border-radius: 15px;      /*设置圆角：为宽度的一半*/

            /*动画*/
            animation:loading 500ms  ease infinite alternate;  /*alternate：表示沿原路返回*/
        }

        .con div:nth-child(1){
            background-color: red;
        }
        .con div:nth-child(2){
            background-color: green;
            /*设置延迟时间*/
            animation-delay: 100ms;
        }
        .con div:nth-child(3){
            background-color: yellow;
            animation-delay: 200ms;
        }
        .con div:nth-child(4){
            background-color: skyblue;
            animation-delay: 300ms;
        }
        .con div:nth-child(5){
            background-color: pink;
            animation-delay: 400ms;
        }
        .con p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <p>loading...</p>

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