使用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);
}
}
最后再上传两张图片