CSS@keyframes做一个简单动画

古城微笑少年丶 2022-05-17 00:37 202阅读 0赞

1.  动画描述：点击动画图片会有两幅图片分别从左边右边缓缓移出来，鼠标离开动画，图片随之消失，伴随着不断切换的背景图片。
2.      <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>简单动画</title>
        </head>
        <style>
            .mr-big{
                width: 1000px;
                height: 500px;
                top: 0px;
                border: 0px red solid;
                margin-top: 0px;
               background-image: url("62.jpg");
                animation: cs1 10s  linear normal infinite;
            }
            .mr-3small{
                width: 300px;
                height: 340px;
                border: 0px dodgerblue  solid;
                margin-left: 300px;
                margin-top: 130px;
            }
         @keyframes  cs1 {
                25%{background-image: url("61.jpg")}
                50%{background-image: url("62.jpg")}
                75%{background-image: url("63.jpg")}
                100%{background-image: url("61.jpg")}
                }
         .mr-0small{
             position: relative;
             top: 98px;
             left: 90px;
         }
            .mr-1small{
                position: absolute;
                top: 228px;
                left: 400px;
            }
            .mr-2small{
                position: absolute;
                top: 170px;
                left: 310px;
            }
            .mr-3small:hover  .mr-1small{
                transform: translateX(342px);
                transition: all  2s ease;
        }
            .mr-3small:hover  .mr-0small{
                transform: translateX(-290px);
                transition: all  2s ease;
        }
            </style>
        <body>
        <div class="mr-big">
            <div class="mr-3small">
                    <div class="mr-0small"><img src="71.jpg"></div>
                    <div class="mr-1small"><img src="70.jpg"></div>
                <div class="mr-2small"><video src="00.mp4" autoplay width="430" height="364" ></video></div>
            </div>
        </div>
        </body>
        </html>

2.动画效果截图：

![70][]

![70 1][]

![70 2][]

![70 3][]

动画可以点开右边链接查看：[http://v.youku.com/v\_show/id\_XMzc2MTU0MzYyOA==.html][http_v.youku.com_v_show_id_XMzc2MTU0MzYyOA_.html]

[70]: /images/20220517/29cb036669e342f9806c1a073d357508.png
[70 1]: /images/20220517/d0bf25abdaed43519b6f49971b1332e6.png
[70 2]: /images/20220517/5ad596c46ad14da2ae1e361ff022c742.png
[70 3]: /images/20220517/d085afe1e37944b19f37ab8bf2a53aed.png
[http_v.youku.com_v_show_id_XMzc2MTU0MzYyOA_.html]: http://v.youku.com/v_show/id_XMzc2MTU0MzYyOA==.html