利用input控制图片切换，css3的各种选择器配合交互，@keyframes实现动画
注：不支持css3的浏览器(IE9及之前版本)无法使用
因为我是用less写的，故而这里上的是less的代码，想要用css看的伙伴可以网上编译：http://www.matools.com/less;
源码看这儿：
https://gitee.com/codeFarmerPen/pure_css3less_implementation_of_banner__free_js_carousel_figure
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link href="css/style.css" rel="stylesheet" />-->
<!--下面引用了less的cdn，用css的话就删除下面两行显现上面一行-->
<link href="less/style.less" rel="stylesheet/less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
<article id="home_banner">
<div>
<input type="radio" name="home_banner" checked="checked" />
<input type="radio" name="home_banner" />
<input type="radio" name="home_banner" />
<input type="radio" name="home_banner" />
<input type="radio" name="home_banner" />
<article class="home_banner">
<img src="banner0.jpg" />
<img src="banner1.jpg" />
<img src="banner2.jpg" />
<img src="banner3.jpg" />
<img src="banner4.jpg" />
</article>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img src="banner4.jpg" />
</div>
</article>
</body>
</html>
Less
//cssreset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,select,img {margin: 0;padding: 0;}
input,button,textarea,img {outline: none;}
button {border: none;background-color: rgba(0, 0, 0, 0);}
img {border: none;}
a,a:hover,a:focus {text-decoration: none;}
div{-webkit-text-size-adjust:none;}
li{list-style: none;}
html {
font-size: 16px;
text-size-adjust: none;
}
body{
font-family: "微软雅黑";
}
//banner
@len:5;//图片的长度
#home_banner{
position: relative;
width: 100%;
height: auto;
&>div{
position: absolute;
width: 100%;
height: auto;
@time:4s;
&>img{
float: left;
width: 100%;
height: auto;
visibility: hidden;
}
&>input,&>ul li{
@l:160;//元素间距tranform的百分比
position: absolute;
top: 88%;
left: 50%;
z-index: 5;
width: 16px;
height: 16px;
.loop_input_ul(@len);
.keyframes_input_ul(@len,@l,animate_input_ul,1/@len*100%,2/@len*100%,3/@len*100%,4/@len*100%,5/@len*100%,6/@len*100%,7/@len*100%,8/@len*100%,9/@len*100%,10/@len*100%);
animation:animate_input_ul 3s*@len infinite;
}
&>input{
opacity: 0;
.loop_input(@len);
}
.home_banner{
img{
position: absolute;
width: 100%;
transition: 0.3s;
animation:animate_img 3s*@len infinite;
}
.keyframes_img(100%/@len,animate_img);//每个img都有一个动画效果时长几乎相等，总时间取决于img数目，单个时间为img数目分之1
}
&>ul{
li{
z-index: 4;
border-radius: 16px;
background-color: #fff;
overflow: hidden;
&::after{
display: block;
content: "";
width: 100%;
height: 100%;
border-radius: inherit;
}
.keyframes_ul(animate_ul,0.7);//同img
}
}
}
}
.loop_input(@_input)when(@_input >= 1) {
&:nth-of-type(@{_input}):checked{
&~.home_banner{
img{
.loop_img(@len,@_input);//控制img的animation-delay属性来控制img出现的先后顺序
}
}
&~ul{
li{
&:nth-of-type(@{_input}){
box-sizing: border-box;
border: 1px solid #d6d6d6;
background-color: #ccc*0.7;
&::after{
animation:animate_ul 3s infinite ;
}
}
}
}
}
.loop_input(@_input - 1)
}
//.loop_input_ul控制input 和li的位置;input和ul一一对应;
.loop_input_ul(@_ul) when(@_ul >= 1) {
@_ul2:@_ul - 1;//下次传参
&:nth-of-type(@{_ul}){
animation-delay: -3s* @_ul2 ;
}
.loop_input_ul(@_ul2)//继续传参调用
}
.keyframes_input_ul(@len,@l,@name,@len0,@len1,@len2,@len3,@len4,@len5,@len6,@len7,@len8,@len9) when(@len >1){
//@len是li的长度,@l是transform里的百分比值,后面的是参数
@l_min : (1-@len)*@l/2*1% ;//最左边节点的位置,
@l_max :(@len - 1)*@l/2*1% ;//最右边节点的位置,
@_time : 0.0001;
transform: translateX(@l_min);
@keyframes @name {
0%{
content:@l_11;
transform: translateX(@l_min);
}
.loop(@self) when(@self <= 9){
@l_1: ~"len@{self}";
@l_11:@@l_1;
@result: (@l_11 - @_time)*1%;
@{result} when (@l_11 < 100%){
transform: translateX(@l_min + @self*@l);
}
@{l_11} when (@l_11 < 100%){
transform: translateX(@l_min + (@self+1)*@l);
}
.loop(@self + 1);
}
.loop(0);
@max:(100-@_time)*1%;
@{max}{
transform: translateX(@l_max);
}
100%{
transform: translateX(@l_min);
}
}
}
.keyframes_ul (@name,@opacity) when(@len >1) {
@opa2: @opacity*0.7;
@keyframes @name {
0%{
opacity: @opa2;
}
10%{
opacity: @opacity;
}
90%{
opacity: @opacity;
}
100%{
opacity: @opa2;
}
}
}
//控制动画延迟时间
.loop_img(@_img,@_input) when(@_img >= 1) {
&:nth-of-type(@{_img}) when(@_img >= @_input){
animation-delay: 3s*(@_img - @_input);
}
&:nth-of-type(@{_img}) when(@_img < @_input){
animation-delay: 3s*(@_img + @len - @_input);
}
.loop_img(@_img - 1,@_input);
}
.keyframes_img(@len,@name) when(@len >1) {
@time: 6/@len;//动画出现 @time相当于 (9/@len)% *@len(img数量)*3s = 9%*3s=0.27s 的切换时间,固定值
@len0: @len*( @time);//动画停顿
@len1: @len*(1 + @time);//动画停顿
@len2: @len*(1 + @time*2);//动画消失
@keyframes @name {
0%{
opacity: 0;
z-index: 4;//层级控制
}
@{len0}{
opacity: 1;
z-index: 4;//层级控制 这里和上面的值一定要比下面的高(新出现的img层级要比将消失的高)
}
@{len1}{
opacity: 1;
z-index: 3;
}
@{len2}{
opacity: 0;
z-index: 1;
}
100%{
opacity: 0;
z-index: 0;
}
}
}