梦梦~~的博客：使用HTML+CSS制作网易云轮播

当前位置博文首页 > 梦梦~~的博客：使用HTML+CSS制作网易云轮播

梦梦~~的博客：使用HTML+CSS制作网易云轮播

作者：[db:作者] 时间：2021-07-12 18:37

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