您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么用CSS3編寫的輪播特效”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用CSS3編寫的輪播特效”吧!
html代碼:
<div class="tpt-banner"> <input name="ban" id="ban1" type="radio"> <input name="ban" id="ban2" type="radio"> <input name="ban" id="ban3" type="radio"> <ul> <li class="num1" style="background: #009688;">輪播1</li> <li class="num2" style="background: #5FB878;">輪播2</li> <li class="num3" style="background: #1E9FFF;">輪播3</li> </ul> <div class="nev"> <label class="num1" for="ban1"></label> <label class="num2" for="ban2"></label> <label class="num3" for="ban3"></label> </div> <div class="nxt"> <label class="num1" for="ban1"></label> <label class="num2" for="ban2"></label> <label class="num3" for="ban3"></label> </div> <div class="nts"> <label class="num1" for="ban1"></label> <label class="num2" for="ban2"></label> <label class="num3" for="ban3"></label> </div> </div>
CSS代碼:
.tpt-banner { position: relative; width: 100%; height: 320px } .tpt-banner input { display: none } .tpt-banner ul li { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 320px; line-height: 320px; text-align: center; color: #fff } .tpt-banner .nev,.tpt-banner .nxt { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px } .tpt-banner .nev label,.tpt-banner .nxt label,.tpt-banner input:checked~.nev label,.tpt-banner input:checked~.nxt label { display: none } .tpt-banner .nev { left: 0 } .tpt-banner .nxt { right: 0 } .tpt-banner .nts { position: absolute; bottom: 15px; width: 100%; text-align: center } .tpt-banner .nev label:after { content: url(https://tpt360.com/tuimg/e.png); cursor: pointer } .tpt-banner .nxt label:after { content: url(https://tpt360.com/tuimg/x.png); cursor: pointer } .tpt-banner .nts label { display: inline-block; width: 12px; height: 12px; border-radius: 100px; background: #fff; cursor: pointer } .tpt-banner input:checked~.nts label { background: #fff } .tpt-banner .nts label.num1 { background-color: #FF5722 } .tpt-banner .nev label.num3,.tpt-banner .nxt label.num2,.tpt-banner ul li.num1 { display: block } .tpt-banner #ban1:checked~.nts .num1,.tpt-banner #ban2:checked~.nts .num2,.tpt-banner #ban3:checked~.nts .num3 { background-color: #FF5722 } .tpt-banner #ban1:checked~.nev label.num3,.tpt-banner #ban1:checked~.nxt label.num2,.tpt-banner #ban1:checked~ul li.num1,.tpt-banner #ban2:checked~.nev label.num1,.tpt-banner #ban2:checked~.nxt label.num3,.tpt-banner #ban2:checked~ul li.num2,.tpt-banner #ban3:checked~.nev label.num2,.tpt-banner #ban3:checked~.nxt label.num1,.tpt-banner #ban3:checked~ul li.num3 { display: block }
到此,相信大家對(duì)“怎么用CSS3編寫的輪播特效”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。