怎么用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编写的轮播特效"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！