CSS3----使用 animation 动画实现一个简单的幻灯片效果。

最新推荐文章于 2021-08-03 22:50:53 发布

菜鸟小营地

最新推荐文章于 2021-08-03 22:50:53 发布

阅读量1.1k

点赞数

分类专栏： CSS3 文章标签： CSS3

本文链接：https://blog.csdn.net/weixin_43318531/article/details/84592293

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

纯css制作一个简单的幻灯片效果

<html>
	div.ani
 <style>
        .ani{
            width: 480px;
            height: 320px;
            margin: 50px auto;
            overflow: hidden;
            box-shadow: 0 0 5px rgba(0,0,0,1);
            background-size: cover;
            background-position: center;
            -webkit-animation-name: "loops";//动画名称
            -webkit-animation-duration: 10s;
            -webkit-animation-iteration-count: infinite;//动画无限次播放
        }
        @-webkit-keyframes "loops" {
            0% {
                background-color: black;
            }
            25% {
                background-color: red;
            }
            50% {
                background-color: pink;
            }
            75% {
                background-color: blue;
            }
            100% {
                background-color: yellow;
            }
        }
    </style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜鸟小营地

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3----使用 animation 动画实现一个简单的幻灯片效果。

纯css制作一个简单的幻灯片效果&lt;html&gt; div.ani &lt;style&gt; .ani{ width: 480px; height: 320px; margin: 50px auto; overflow: hidden; box-sh...
复制链接

扫一扫