使用HTML+CSS制作网易云轮播

本文阅读 1 分钟
首页 代码,Java 正文

使用HTML和CSS制作网易云轮播

        今天现来说说使用CSS的动画技术来实现轮播。现看看效果图 img img         这里是八张图片渐入渐出的效果轮播。

        html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div id="lunbo"></div>
    </body>
</html>

        css代码:

#lunbo{ 
            height: 420px;
            width: 1080px;
            animation:play 20s linear infinite;
            
        }
        /*背景颜色再用一个动画,时间与轮播的时间一样*/
        @keyframes play{ 
            0%{ 
                background:url(../img/a轮播1.png) ;
            }
            15%{ 
                background:url(../img/a轮播2.png) ;
            }
            30%{ 
                background:url(../img/a轮播3.png) ;
                
            }
            45%{ 
                background:url(../img/a轮播4.png) ;
            }
            60%{ 
                background:url(../img/a轮播5.png) ;
            }
            75%{ 
                background:url(../img/a轮播6.png) ;
            }
            90%{ 
                background:url(../img/a轮播7.png) ;
            }
            100%{ 
                background:url(../img/a轮播8.png);
            }
        }

        最后再上传两张图片 img img

本文为互联网自动采集或经作者授权后发布,本文观点不代表立场,若侵权下架请联系我们删帖处理!文章出自:https://blog.csdn.net/qq_46540738/article/details/114590664
-- 展开阅读全文 --
安全面试之XSS(跨站脚本攻击)
« 上一篇 07-24

发表评论

成为第一个评论的人

热门文章

标签TAG

最近回复