How to write the special effects of carousel in CSS3
本篇内容主要讲解"怎么用CSS3编写的轮播特效"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"怎么用CSS3编写的轮播特效"吧!
html代码：
轮播1 轮播2 轮播3
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}到此，相信大家对"怎么用CSS3编写的轮播特效"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!
