Day9_0428 动画animation_.avatar{border-radius: 50%; animation: light 4s ea-CSDN博客

本文链接：https://blog.csdn.net/weixin_52335062/article/details/124483285

一、动画的作用

增加用户体验，但是不可过度使用。

二、关键帧

keyframes ，写在css样式里。

三、动画

1、animation-name：动画属性名。

2、animation-duration：动画持续时间。

3、animation-delay：动画延迟时间。

4、animation-timing-function：动画速度曲线。

5、animation-iteration-count：定义循环次数，其中infinite为无限循环。

6、animation-direction：alternate ：动画轮流反向播放。

7、animation-play-state：动画状态，有paused和running两个值，默认值为running。

8、animation-fill-mode：forwards保留最后一帧动画。

四、简单案例实现

吃豆人简易版

<!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>Document</title>
    <style>
        /* 定义动画 */
        @keyframes bean_roll1 {
            /* 定义帧动画 */
            0% {
                transform: rotate(0);
            }
            50% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(0);
            }
        }
        @keyframes bean_roll2 {
            /* 定义帧动画 */
            0% {
                transform: rotate(0);
            }
            50% {
                transform: rotate(-45deg);
            }
            100% {
                transform: rotate(0);
            }

        }
        @keyframes dou_move {
            from {left: 200px;}
            to {left: 80px;}
        }
        .bean {
            width: 200px;
            height: 200px;
            background-color: #333;
            position: relative;
        }
        .bean .cdr {
            width: 0;
            height: 0;
            border: 50px solid gold;
            border-right-color: transparent;
            border-radius: 50%;
            position: absolute;
            left: 30px;
            top: 50px;
            
        }
        .cdr:nth-of-type(1) {
            animation: bean_roll1 2s linear infinite ;
        }
        .cdr:nth-of-type(2) {
            animation: bean_roll2 2s linear infinite ;
        }
        .eye {
            width: 16px;
            height: 16px;
            background-color: #333;
            position: absolute;
            border-radius: 50%;
            left: 80px;
            top: 66px;
        }
        .dou {
            width: 16px;
            height: 16px;
            background-color: gold;
            position: absolute;
            left: 200px;
            top: 92px;
            border-radius: 50%;
            animation: dou_move 2s linear infinite;
        }
    </style>
</head>
<body>
    <div class="bean">
        <div class="cdr"></div>
        <div class="cdr"></div>
        <div class="eye"></div>
        <div class="dou"></div>
    </div>
</body>
</html>