1、前言
css3动画效果的强大不问可知，自它显现始终热度不减，它与js动画的优劣亦始终作为前端界争论的专题，不可置疑的是css3动画的出此刻必定程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把咱们从烦人的js调试中解放出来，当然css的动画效果有其局限性，咱们不可只用css3模拟出全部的便是动画，另一便是浏览器的兼容性问题。咱们这次用css3实现一个轮播图效果，体验一下css3的强大。
首要说明咱们可次只实现了自动轮播，效果亦是最平常的淡入淡出，并未实现点击轮换效果，最少在我日前水平来看，自动轮播与点击轮换两者纯css3只能选其一，倘若能够同期实现两种效果的办法，请告诉我。
2、布局
<section class="slider-contaner">
<ul class="slider">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
<li class="slider-item slider-item4"></li>
<li class="slider-item slider-item5"></li>
</ul>
</section>
html代码无什么可说的，样式的话首要必定slider的大盒子必定是相对定位，另一咱们采用在li标签中添加bac公斤round-image，由于这般才有可能用纯的css实现响应式，另一背景图为了在响应式中看清全貌，必然运用bac公斤round-size:100%，另一便是高度问题了，显然slider-container必需是和li的高度一致，由于响应式中必然这个高度不可固定死，因此运用height属性显然不行，padding属性能够处理这个问题，一是bac公斤round-image能够表示在padding中，二是padding中以%为单位是以父元素宽度为基准的。
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
.slider-contaner{
width:100%;
position:relative;
}
.slider,.slider-item{
padding-bottom:40%;
}
.slider-item{
width:100%;
position:absolute;
bac公斤round-size:100%;
}
.slider-item1{
bac公斤round-image:url(imgs/1.jpg);
}
.slider-item2{
bac公斤round-image:url(imgs/2.jpg);
}
.slider-item3{
bac公斤round-image:url(imgs/3.jpg);
}
.slider-item4{
bac公斤round-image:url(imgs/4.jpg);
}
.slider-item5{
bac公斤round-image:url(imgs/5.jpg);
}
3、设计动画
淡入淡出效果肯定是运用opacity，首要整体来看所有照片的淡入淡出都是同一个动画，只是时间不同样罢了，这肯定
| 
发表于 2024-6-29 14:18:59
楼主