CSS@keyframes做一个简单动画

最新推荐文章于 2024-01-09 14:15:05 发布

时光Timely

最新推荐文章于 2024-01-09 14:15:05 发布

阅读量789

点赞数 1

文章标签： @keyframes css 动画

本文链接：https://blog.csdn.net/Smtime826/article/details/81390871

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

动画描述：点击动画图片会有两幅图片分别从左边右边缓缓移出来，鼠标离开动画，图片随之消失，伴随着不断切换的背景图片。

<!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.动画效果截图：

动画可以点开右边链接查看：http://v.youku.com/v_show/id_XMzc2MTU0MzYyOA==.html

时光Timely

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS@keyframes做一个简单动画

动画描述：点击动画图片会有两幅图片分别从左边右边缓缓移出来，鼠标离开动画，图片随之消失，伴随着不断切换的背景图片。 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单动画&lt;/title&gt;
复制链接

扫一扫

专栏目录