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

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

        今天现来说说使用CSS的动画技术来实现轮播。现看看效果图
使用HTML+CSS制作网易云轮播_第1张图片
使用HTML+CSS制作网易云轮播_第2张图片
        这里是八张图片渐入渐出的效果轮播。

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

        最后再上传两张图片
使用HTML+CSS制作网易云轮播_第3张图片
使用HTML+CSS制作网易云轮播_第4张图片

你可能感兴趣的:(HTML,css,html,html5)