动画(CSS3) animation

最新推荐文章于 2024-09-09 00:15:00 发布

关注我不迷路

最新推荐文章于 2024-09-09 00:15:00 发布

阅读量627

点赞数 3

文章标签： css3动画运动足球加载动画

本文链接：https://blog.csdn.net/weixin_44264878/article/details/92705175

版权

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称动画时间运动曲线何时开始播放次数(无线播放infinite) 是否反方向;
*保持播放完后的位置：forwards
案例1
踢足球（近大远小）

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 100px;
            transform: translate(-30px, 100px)  rotate(-180deg) scale(1);
            animation: ball 5s ease-in infinite;
        }
        @keyframes ball {
            0%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}
            25%{transform: translate(400px, 500px) rotate(360deg) scale(2);}
            50%{transform: translate(1000px,300px) rotate(-180deg) scale(1);}
            75%{transform: translate(400px, -30px) rotate(360deg) scale(0.5);}
            100%{transform: translate(-30px, 100px) rotate(-180deg) scale(1);}
        }
    </style>
</head>
<body>
<img src="images/ball.jpg" alt="">
</body>
</html>

案例2
加载动画
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .public{
            width: 40px;
            height: 40px;
            margin: 50px 100px;
            position: absolute;
            /*border: 1px solid;*/
        }
        .public span{
            width: 10px;
            height: 10px;
            background-color: #999;
            border-radius: 50%;
            position: absolute;
            animation: move 1.5s linear infinite;
        }
        .public span:nth-child(1){ left: 0; top: 0px;}
        .public span:nth-child(2){ right: 0; top: 0px;}
        .public span:nth-child(3){ right: 0; bottom: 0px;}
        .public span:nth-child(4){ left: 0; bottom: 0px;}

        .box2{
            transform: rotate(45deg);
        }
        @keyframes move {
        0% { transform: scale(0.1)}
        50% { transform: scale(1)}
        100% { transform: scale(0.1)}
        }

        /*设置等待时间*/
        .box1 span:nth-child(1){ animation-delay: -0.1s;}
        .box2 span:nth-child(1){ animation-delay: -0.3s;}
        .box1 span:nth-child(2){ animation-delay: -0.5s;}
        .box2 span:nth-child(2){ animation-delay: -0.7s;}
        .box1 span:nth-child(3){ animation-delay: -0.9s;}
        .box2 span:nth-child(3){ animation-delay: -1.1s;}
        .box1 span:nth-child(4){ animation-delay: -1.3s;}
        .box2 span:nth-child(4){ animation-delay: -1.5s;}

    </style>
</head>
<body>
<div class="public box1">
    <span></span><span></span><span></span><span></span>
</div>
<div class="public box2">
    <span></span><span></span><span></span><span></span>
</div>
</body>
</html>