css3动画实现最简单的幻灯片效果

约定不等于承诺〃 2021-09-19 16:46 337阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>css3 实现幻灯片效果</title>
        <style type="text/css">
            .slide {
                width: 750px;
                height: 200px;
                animation: loops 3s infinite;
                /*animation:的第一个参数---检索或设置动画的名称，第二个参数--动画持续的时间 第三个参数---循环次数infinite"为无限循环的意思**/
    
            }
    
            @keyframes loops { /*动画名称和上面设置的动画名称一样*/
                /*下面是动画过程*/
                /*三秒的时间,在0%，50%，100%无线循环播放下面三张图*/
                0% {
                    background: url(https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/17e2352b857f66e9d2948e98dc483bc2.jpg_750x200_2857d0a3.jpg);
                }
    
                50% {
                    background: url(https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg);
                }
    
                100% {
                    background: url(https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/472a476c776c6fd962fcfd6fd75521d5.jpg_750x200_298bac66.jpg);
                }
            }
    
        </style>
    </head>
    <body>
    <div class="slide"></div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，337人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

文章目录一、需求说明二、代码分析 1、动画属性 2、布局分析 3、动画实现三、完整代码示例

ゞ浴缸里的玫瑰/ 2023年10月14日 17:36/ 0 赞/ 13 阅读

相关 CSS3实现的线条波浪动画效果

阅读目录阐述 HTML结构 CSS 样式预览阐述这是一款使用CSS3 animation 动画和 png 图片制作的

「爱情、让人受尽委屈。」/ 2023年10月06日 23:49/ 0 赞/ 7 阅读

相关 CSS-简单动画效果

简单的图标扩散动画，重点备注效果为一个心脏跳动 Body： <div id="img\_head\_back"> <img src="img/邮箱(1).png

蔚落/ 2023年06月03日 11:52/ 0 赞/ 10 阅读

相关 CSS3动画效果二

nimation CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所

「爱情、让人受尽委屈。」/ 2022年09月25日 03:23/ 0 赞/ 282 阅读

相关 CSS3动画效果一

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、tran

亦凉/ 2022年09月25日 03:22/ 0 赞/ 261 阅读

相关 css3动画抖动效果

html结构： <div class="top"> <a href="\"> <div>

深碍√TFBOYSˉ_/ 2022年08月07日 02:39/ 0 赞/ 521 阅读

相关 css3动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 02:44/ 0 赞/ 318 阅读

相关使用css来实现幻灯片的效果

使用css来实现幻灯片的效果（1）自动轮播，鼠标移入停止播放，鼠标移出继续播放，但是不能设置按钮自动播放，不能点击一个点跳转到对应的图片思路：切换图片就是像上面js那样

╰半夏微凉°/ 2022年04月12日 12:59/ 0 赞/ 349 阅读

相关 Css3动画切换效果

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月21日实在不知道写什么，就翻了老师给的一些css样式看看有什么好玩的，老师用伪类做了一个鼠标移入到d

浅浅的花香味﹌/ 2022年02月26日 13:56/ 0 赞/ 434 阅读

相关 css3动画实现最简单的幻灯片效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

约定不等于承诺〃/ 2021年09月19日 16:46/ 0 赞/ 338 阅读