[成都|内门弟子]CSS-何俊|2020年06月26日的日报-技能树.IT修真院

发表于： 2020-06-26 22:05:24

1 1016

今天完成的事情：

写两种css轮播图方式

完成任务14页面1

1.轮播图使用的是自动轮播图，html:

            <section class="slider-contaner">
                <div class="banner-arrow">
                    <div class="banner-left"></div>
                    <div class="banner-right"></div>
                </div>
                <ul class="slider">
                    <li class="slider-item slider-item1"></li>
                    <li class="slider-item slider-item2"></li>
                    <li class="slider-item slider-item3"></li>
                </ul>
                <div class="focus-container">
                    <ul class="floatfix">
                        <li>
                            <div class="focus-item focus-item1"></div>
                        </li>
                        <li>
                            <div class="focus-item focus-item2"></div>
                        </li>
                        <li>
                            <div class="focus-item focus-item3"></div>
                        </li>
                    </ul>
                </div>
            </section>

css:

ul,li{list-style:none;padding:0}.floatfix{*zoom:1}.floatfix:after{content:"";display:table;clear:both}.slider-contaner{width:100%;position:relative}.slider-item+.slider-item{opacity:0}.slider-item{width:100%;position:absolute;animation-timing-function:linear;animation-name:fade;animation-iteration-count:infinite;background-size:100%;background-repeat:no-repeat}.focus-container{position:absolute;z-index:7;margin:0 auto;left:0;right:0}.focus-container li{width:1rem;height:1rem;border-radius:50%;float:left;margin:0 .05rem;background:#fff}.focus-item{width:100%;height:100%;border-radius:inherit;animation-timing-function:linear;animation-name:fade;animation-iteration-count:infinite}.focus-item2,.focus-item3,.focus-item4,.focus-item5{opacity:0}.focus-container{bottom:2%;display:flex;justify-content:center}.focus-item{background:#51B1D9}.slider-item,.focus-item{animation-duration:20s}.slider-item1,.focus-item1{animation-delay:-1s}.slider-item2,.focus-item2{animation-delay:3s}.slider-item3,.focus-item3{animation-delay:7s}.slider-item4,.focus-item4{animation-delay:11s}.slider-item5,.focus-item5{animation-delay:15s}@keyframes fade{0%{opacity:0;z-index:2}5%{opacity:1;z-index:1}20%{opacity:1;z-index:1}25%{opacity:0;z-index:0}100%{opacity:0;z-index:0}}.slider-item1{background-image:url("./images/新建文件夹/风景11.jpg")}.slider-item2{background-image:url("./images/新建文件夹/风景2.jpg")}.slider-item3{background-image:url("./images/新建文件夹/飞机11.jpg")}.slider-item4{background-image:url("./images/22.jpg")}.slider-item5{background-image:url("./images/新建文件夹/技能树首页_09.jpg")}.slider,.slider-item{padding:0;padding-bottom:30%}.banner-arrow{width:100%;display:flex;justify-content:space-between;position:absolute;top:40%}.banner-left{width:.2rem;height:.35rem;background-image:url(../image/beijing.png);background-repeat:no-repeat;background-size:cover;z-index:999}.banner-right{width:.2rem;height:.35rem;background-image:url(../image/beijing.png);background-repeat:no-repeat;background-size:cover;z-index:999}