利用CSS3动画属性写了一个比较简单的幻灯片

最新推荐文章于 2021-05-13 13:27:50 发布

dx0829

最新推荐文章于 2021-05-13 13:27:50 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/dx0829/article/details/81060926

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ani{
            width: 500px;
            height:750px;
            margin:50px auto;
            overflow: hidden;
            box-shadow:0 0 5px rgba(0,0,0,1);
            background-size: cover;
            background-position: center;
            animation: duxin 10s infinite;
        }
        @keyframes duxin {
            0%{
                background:url(http://www.5djiaren.com/uploads/2015-10/09-085227_138.jpg) no-repeat;
            }
            25%{
                background:url(http://p2.ifengimg.com/cmpp/2016/12/28/08/c2d1d40d-650d-45c6-b5f4-9759e5f5fd13_size31_w500_h730.jpg) no-repeat;
            }
            50%{
                background:url(http://pic.guaixun.com/uploads/allimg/201806051055c/20180603153659221845.jpg) no-repeat;
            }
            75%{
                background:url(http://img2.cnxz.cn/photo_upload/kindeditor/201412/24/20141224030241824.jpg) no-repeat;
            }
            100%{
                background:url(http://img4.imgtn.bdimg.com/it/u=2277293288,2327503482&fm=27&gp=0.jpg) no-repeat;
            }
        }
    </style>
</head>
<body>
    <div class="ani"></div>
</body>
</html>

CSS3新属性动画效果大小根据图片来

dx0829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用CSS3动画属性写了一个比较简单的幻灯片

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫