易網(wǎng)網(wǎng)站設(shè)計(jì)師們?cè)谌粘?a href="http://m.gdywg.com.cn">網(wǎng)站制作中發(fā)現(xiàn)，如果一個(gè)網(wǎng)站中包含太多的JS代碼，會(huì)有兩個(gè)弊端：1、部分JS功能容易沖突；2、網(wǎng)站運(yùn)行效率降低。為解決這一問題，易網(wǎng)網(wǎng)站設(shè)計(jì)師們專門設(shè)計(jì)出一個(gè)純CSS全屏循環(huán)漸變焦點(diǎn)圖banner，現(xiàn)將代碼分享于大家。
單文件，圖片暫時(shí)用data代碼圖片（紅綠藍(lán)漸變）代替，使用時(shí)候直接替換成圖片地址即可。
應(yīng)用時(shí)，無需定義banner尺寸，只需幾張banner圖片尺寸比例一樣即可，默認(rèn)寬度100%，高度自適應(yīng)。
里面許多地方運(yùn)用了CSS3的新特性，具體可參考易網(wǎng)整理的CSS手冊(cè)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>純CSS（無JS）banner焦點(diǎn)圖代碼</title>
<style>
*{margin:0;padding:0;border:0;box-sizing:border-box;transition:all ease .5s;}
body,html{width:100%;height:100%;cursor:default;background:#fff;}
body{font:14px/1.5em Arial,"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53";color:#333;}
/*------banner 樣式部分---------*/
.csslider1{position:relative;display:inline-block;width:100%;}
.csslider1>.cs_anchor{display:none}
.csslider1>ul{position:relative;z-index:1;overflow:hidden;margin:0 auto;padding:0;white-space:nowrap;font-size:0;line-height:0}
.csslider1>ul>li.img img{width:100%}
.csslider1>ul>li.img{font-size:0;-khtml-user-select:none;-moz-user-select:none;user-select:none}
.csslider1>ul>li{position:relative;display:inline-block;overflow:hidden;box-sizing:border-box;width:100%;height:100%;vertical-align:top;white-space:normal;font-size:15px;font-size:initial;line-height:normal;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.csslider1 .cs_lnk{position:absolute;top:-9999px;left:-9999px;font-size:0;opacity:0}
.csslider1>.cs_arrownext,.csslider1>.cs_arrowprev{position:absolute;top:50%;z-index:5;box-sizing:content-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.csslider1>.cs_arrownext>label,.csslider1>.cs_arrowprev>label{position:absolute;z-index:-1;text-decoration:none;opacity:0;cursor:pointer}
.csslider1>.cs_arrowprev{left:0}
.csslider1>.cs_arrownext{right:0}
.csslider1>.cs_arrownext>label.num1,.csslider1>.cs_arrowprev>label.num2{z-index:5;opacity:1}
.csslider1>.slide:checked~.cs_arrownext>label,.csslider1>.slide:checked~.cs_arrowprev>label{z-index:-1;opacity:0}
.csslider1>#cs_slide1_0:checked~.cs_arrownext>label.num1,.csslider1>#cs_slide1_0:checked~.cs_arrowprev>label.num2,.csslider1>#cs_slide1_1:checked~.cs_arrownext>label.num2,.csslider1>#cs_slide1_1:checked~.cs_arrowprev>label.num0,.csslider1>#cs_slide1_2:checked~.cs_arrownext>label.num0,.csslider1>#cs_slide1_2:checked~.cs_arrowprev>label.num1{z-index:5;opacity:1}
@keyframes arrow{0%,33.32333333333334%{z-index:5;opacity:1}
33.333333333333336%,to{z-index:-1;opacity:0}
}
.csslider1>#cs_pause1:checked~.cs_arrownext>label.num1,.csslider1>#cs_pause1:checked~.cs_arrowprev>label.num2,.csslider1>#cs_play1:checked~.cs_arrownext>label.num1,.csslider1>#cs_play1:checked~.cs_arrowprev>label.num2{animation:arrow 12s infinite -2s}
.csslider1>#cs_pause1:checked~.cs_arrownext>label.num2,.csslider1>#cs_pause1:checked~.cs_arrowprev>label.num0,.csslider1>#cs_play1:checked~.cs_arrownext>label.num2,.csslider1>#cs_play1:checked~.cs_arrowprev>label.num0{animation:arrow 12s infinite 2s}
.csslider1>#cs_pause1:checked~.cs_arrownext>label.num0,.csslider1>#cs_pause1:checked~.cs_arrowprev>label.num1,.csslider1>#cs_play1:checked~.cs_arrownext>label.num0,.csslider1>#cs_play1:checked~.cs_arrowprev>label.num1{animation:arrow 12s infinite 6s}
.csslider1.cs_pauseHover:hover>.cs_arrownext>label,.csslider1.cs_pauseHover:hover>.cs_arrowprev>label,.csslider1>#cs_pause1:checked~.cs_arrownext>label,.csslider1>#cs_pause1:checked~.cs_arrowprev>label{animation-play-state:paused!important}
.csslider1>.slide:checked~.cs_arrownext>label,.csslider1>.slide:checked~.cs_arrowprev>label{animation:none}
.csslider1>.cs_bullets{position:absolute;left:0;z-index:6;width:100%;text-align:center;font-size:0;line-height:8pt;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.csslider1>.cs_bullets>div{margin-left:-50%;width:100%}
.csslider1>.cs_bullets>label{position:relative;display:inline-block;cursor:pointer}
.csslider1>#cs_slide1_0:checked~ul>li.num0,.csslider1>#cs_slide1_1:checked~ul>li.num1,.csslider1>#cs_slide1_2:checked~ul>li.num2{z-index:2;opacity:1}
.csslider1>ul>li{position:absolute;top:0;left:0;z-index:1;display:inline-block;opacity:0;transition:opacity 2s ease;-ms-transition:opacity 2s ease}
.csslider1>ul>li.num0{z-index:2;opacity:1}
.csslider1>.slide:checked~ul>li.num0{z-index:1;opacity:0}
@keyframes fade{0%,50%,to{z-index:2;opacity:0}
16.666666666666668%,33.333333333333336%{z-index:2;opacity:1}
}
.csslider1>#cs_pause1:checked~ul>li.num0,.csslider1>#cs_play1:checked~ul>li.num0{animation:fade 12s infinite -2s}
.csslider1>#cs_pause1:checked~ul>li.num1,.csslider1>#cs_play1:checked~ul>li.num1{animation:fade 12s infinite 2s}
.csslider1>#cs_pause1:checked~ul>li.num2,.csslider1>#cs_play1:checked~ul>li.num2{animation:fade 12s infinite 6s}
.csslider1>#cs_pause1:checked~ul>li,.csslider1>#cs_play1:checked~ul>li{transition:none;-ms-transition:none}
.csslider1.cs_pauseHover:hover>ul>li,.csslider1>#cs_pause1:checked~ul>li{animation-play-state:paused!important}
.csslider1>.slide:checked~ul>li{animation:none}
.csslider1{-ms-perspective:500px;-o-perspective:500px;perspective:500px}
.csslider1>.cs_play_pause{transition:.5s opacity 0s ease;-ms-transition:.5s opacity 0s ease}
.csslider1>.cs_arrownext,.csslider1>.cs_arrowprev,.csslider1>.cs_play_pause{opacity:0}
.csslider1:hover>.cs_arrownext,.csslider1:hover>.cs_arrowprev,.csslider1:hover>.cs_play_pause{opacity:1;}
.csslider1>.cs_arrownext>label,.csslider1>.cs_arrowprev>label{position:absolute;top:50%;transform:translate(0,-50%);border-radius:0px;background:#000;background-color:rgba(0,0,0,.3)}
.csslider1>.cs_arrownext>label:after,.csslider1>.cs_arrowprev>label:after{display:block;color:#fff;text-align:center;font:70px Times;padding:5px 10px 15px 10px}
.csslider1>.cs_arrowprev{left:70px;}
.csslider1>.cs_arrownext{right:70px}
.csslider1>.cs_arrowprev>label{right:0}
.csslider1>.cs_arrownext>label{left:0}
.csslider1>.cs_arrowprev>label:after{content:'?'}
.csslider1>.cs_arrownext>label:after{content:'?'}
.csslider1>.cs_bullets{bottom:5px;margin-bottom:5px}
.csslider1>.cs_bullets>label{-ms-perspective:500px;-o-perspective:500px;perspective:500px}
.csslider1>.cs_bullets>label{margin:0 6px;padding:6px;border-radius:50%;background:#000;background-color:rgba(255,255,255,.6)}
.csslider1>.cs_bullets>label.num0{background-color:rgba(0,0,0,1)}
.csslider1>.slide:checked~.cs_bullets>label{background:#000;background-color:rgba(255,255,255,.6)}
.csslider1>#cs_slide1_0:checked~.cs_bullets>label.num0,.csslider1>#cs_slide1_1:checked~.cs_bullets>label.num1,.csslider1>#cs_slide1_2:checked~.cs_bullets>label.num2,.csslider1>.cs_bullets>label:hover{background-color:rgba( 0,0,0,1)}
@keyframes bullet{0%,33.32333333333334%{background-color:rgba( 0,0,0,1)}
33.333333333333336%,to{background:#000;background-color:rgba(255,255,255,.6)}
}
.csslider1>#cs_pause1:checked~.cs_bullets>label.num0,.csslider1>#cs_play1:checked~.cs_bullets>label.num0{animation:bullet 12s infinite -2s}
.csslider1>#cs_pause1:checked~.cs_bullets>label.num1,.csslider1>#cs_play1:checked~.cs_bullets>label.num1{animation:bullet 12s infinite 2s}
.csslider1>#cs_pause1:checked~.cs_bullets>label.num2,.csslider1>#cs_play1:checked~.cs_bullets>label.num2{animation:bullet 12s infinite 6s}
.csslider1>#cs_pause1:checked~.cs_bullets>label,.csslider1>#cs_play1:checked~.cs_bullets>label{transition:none;-ms-transition:none}
.csslider1.cs_pauseHover:hover>.cs_bullets>label,.csslider1>#cs_pause1:checked~.cs_bullets>label{animation-play-state:paused!important}
.csslider1>.slide:checked~.cs_bullets>label{animation:none}
@keyframes cs_title{3.0625%,30.260833333333334%{z-index:2;visibility:visible;opacity:1;transform:rotateX(-9deg)}
28.948333333333334%,4.375%{z-index:2;visibility:visible;opacity:1;transform:rotateX(0)}
33.333333333333336%{z-index:2;visibility:hidden;opacity:0;transform:rotateX(90deg)}
33.343333333333334%,to{z-index:0}
}
@keyframes cs_descr{25.885833333333334%,6.125%{z-index:1;visibility:visible;opacity:1;transform:rotateX(9deg)}
24.573333333333334%,8.75%{z-index:1;visibility:visible;opacity:1;transform:rotateX(0)}
33.333333333333336%{z-index:1;visibility:hidden;opacity:0;transform:rotateX(-90deg)}
33.343333333333334%,to{z-index:0}
}
@keyframes cs_title_text{3.0625%,30.260833333333334%{opacity:1;transform:translateX(-1%)}
28.948333333333334%,4.375%{opacity:1;transform:translateX(0)}
33.333333333333336%{opacity:0;transform:translateX(100%)}
}
@keyframes cs_descr_text{25.885833333333334%,6.125%{opacity:1;transform:translateX(1%)}
24.573333333333334%,8.75%{opacity:1;transform:translateX(0)}
33.333333333333336%{opacity:0;transform:translateX(-100%)}
}
</style>
</head>
<body>
<section id="rt-showcase-surround">
<div id="rt-showcase" class="slider-container rt-overlay-dark">
<div class="rt-container slider-container">
<div class="rt-grid-12 rt-alpha rt-omega">
<div class="csslider1 autoplay">
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_0" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_1" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" autocomplete="off" id="cs_slide1_2" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" autocomplete="off" id="cs_play1" type="radio" class="cs_anchor" checked>
<input name="cs_anchor1" autocomplete="off" id="cs_pause1" type="radio" class="cs_anchor">
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="data:image/gif;base64,R0lGODlhCQADALMAANIfH+WAgNUtLfCzs9tMTPK9vd9iYtk9PemPj8wAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAJAAMAAAQRsCBzxDGojEBAAkQwSJSFFREAOw==" style="width: 100%;">
</div>
<li class="num0 img">
<img src="data:image/gif;base64,R0lGODlhCQADALMAANIfH+WAgNUtLfCzs9tMTPK9vd9iYtk9PemPj8wAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAJAAMAAAQRsCBzxDGojEBAAkQwSJSFFREAOw==">
</li>
<li class="num1 img">
<img src="data:image/gif;base64,R0lGODlhCQADALMAAEylH5nMgMPhs1erLW+3TKbSj8vlvWOxPYHAYjOZAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAJAAMAAAQR0BR0xkHFiEBAAkQgSJSFGREAOw==">
</li>
<li class="num2 img">
<img src="data:image/gif;base64,R0lGODlhCQADALMAAC1X1R9M0kxv24CZ5bPD8I+m6WKB373L8j1j2QAzzAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAJAAMAAAQR8BSDADLlkCFCCsJASJSFHREAOw==">
</li>
</ul>
<div class="cs_arrowprev">
<label class="num0" for="cs_slide1_0"></label>
<label class="num1" for="cs_slide1_1"></label>
<label class="num2" for="cs_slide1_2"></label>
</div>
<div class="cs_arrownext">
<label class="num0" for="cs_slide1_0"></label>
<label class="num1" for="cs_slide1_1"></label>
<label class="num2" for="cs_slide1_2"></label>
</div>
<div class="cs_bullets">
<label class="num0" for="cs_slide1_0">
<span class="cs_point"></span>
</label>
<label class="num1" for="cs_slide1_1">
<span class="cs_point"></span>
</label>
<label class="num2" for="cs_slide1_2">
<span class="cs_point"></span>
</label>
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</section>
</body>
</html>易網(wǎng)原創(chuàng)，可免費(fèi)商業(yè)使用，文章轉(zhuǎn)載請(qǐng)注明出處。
