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

最新推荐文章于 2023-05-25 11:03:49 发布

梦梦~~

最新推荐文章于 2023-05-25 11:03:49 发布

阅读量1.4k

点赞数 7

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/qq_46540738/article/details/114590664

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

今天现来说说使用CSS的动画技术来实现轮播。现看看效果图
在这里插入图片描述

这里是八张图片渐入渐出的效果轮播。

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);
        	}
        }

最后再上传两张图片
在这里插入图片描述

梦梦~~

关注

7
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
3
评论
使用HTML+CSS制作网易云轮播

使用HTML和CSS制作网易云轮播        今天现来说说使用CSS的动画技术来实现轮播。现看看效果图        这里是八张图片渐入渐出的效果轮播。        html代码：<!DOCTYPE html><html> &
复制链接

扫一扫