當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动端banner css3(@keyframes )实现

發布時間：2025/3/21 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端banner css3(@keyframes )实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

這個是我用webpack時的生產文件部分，為了方便觀看，在頁面引入了less和vue的cdn，需要復制的話方便看

注：cssreset部分沒有寫進來

//文檔結構，只看有用的部分即可

//html部分

<!DOCTYPE html> <html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/x-icon" href="" /><title></title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"><link href="css/main.css" rel="stylesheet"/><link href="less/home.less" rel="stylesheet/less"/><script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="home_banner" class="left0"><article ><a v-for="img in imgs" :_href="img.href" ><img :src="img.picture" /></a></article><ul><li v-for="img in imgs"><span></span></li></ul></div></body> </html>

//js部分

//移動端屏幕適配 let _screen = 750; let htmfontsi = document.body.clientWidth,_htmfontsize = parseFloat(htmfontsi)/_screen*100;document.getElementsByTagName("html")[0].style.fontSize=_htmfontsize+"px"; //home var home_banner=new Vue({el: "#home_banner",data:{imgs:[{href:"",picture:"img/huli_08.jpg"},{href:"",picture:"img/huli_08.jpg"},{href:"",picture:"img/huli_08.jpg"},{href:"",picture:"img/huli_08.jpg"}] } }) //behavior 行為 //自用事件封裝 function on(argu, method, fun) {argu.addEventListener(method, fun); } //banner部分 let $home_banner=function(){if(home_banner.imgs.length>=2){let home_banner$ = document.getElementById("home_banner"),length = home_banner.imgs.length,len =length -1,arr = [];for( let i =0;i<length;i++){arr.push("left"+i)//從左向右滑動，class成組注意：i的數字代表當前動畫的是第幾個img} let move =function(){arr.push(arr[0]);arr.shift(arr[0]);home_banner$.setAttribute("class",arr[0])}let remove =function(){arr.unshift(arr[len]);arr.pop(arr[len]);let rearr = arr.join(".").replace(/left/g,"right").split(".");//從右向左滑動，class成組注意：left與right轉換的時候，數字沒有變化，動作開始時，新舊class的i值不變home_banner$.setAttribute("class",rearr[0]);} let moveto =setInterval(function(){move();},3000)let xl,xr;function touchstart() {xl = event.changedTouches[0].clientX;clearInterval(moveto);};function touchend() {xr = event.changedTouches[0].clientX;if (xr - xl < -50) {//向左滑動remove();} else if (xr - xl > 50) {//向右滑動move();}moveto =setInterval(function(){move();},3000)};on(home_banner$,"touchstart",function(event){touchstart();})on(home_banner$,"touchend",function(event){touchend();})} }; $home_banner();

//less部分

@fff:#fff; @c3:#333; @c6:#666; @c9:#999; @df:#f3eeee; @d6:#d6d6d6; @e:#eee; @fe:#fe0000; //loop方法多層編譯 .loop(@count)when(@count > 1){&.left@{count}{@_count:@count+1;article{a{&:nth-child(@{count}){z-index: 2;-webkit-animation:left_hide 0.3s forwards; }&:nth-child(@{_count}){z-index: 3;-webkit-animation:left_show 0.3s forwards; }}}ul{li{&:nth-child(@{count}){span{-webkit-animation:left_show 0.3s forwards; }}&:nth-child(@{_count}){span{-webkit-animation:left_hide 0.3s forwards; }}}}}&.right@{count}{@_count:@count+1;article{a{&:nth-child(@{count}){z-index: 2;-webkit-animation:right_hide 0.3s forwards; }&:nth-child(@{_count}){z-index: 3;-webkit-animation:right_show 0.3s forwards; }}}ul{li{&:nth-child(@{count}){span{-webkit-animation:right_show 0.3s forwards; }}&:nth-child(@{_count}){span{-webkit-animation:right_hide 0.3s forwards; }}}}}.loop((@count - 1)); } #home_banner{position: relative;float: left;width: 100%;overflow: hidden; .loop(10);//此處調用loop方法括號內的值為可實現效果的img的最大數量，可以根據img的數目更改//下面幾個涉及 first-child 和last-child故而不寫入loop中&.left0{article{a{&:last-child{z-index: 2;-webkit-animation:left_hide 0.3s forwards; }&:first-child{z-index: 3;-webkit-animation:left_show 0.3s forwards; }}}ul{li{&:last-child{span{-webkit-animation:left_show 0.3s forwards; }}&:first-child{span{-webkit-animation:left_hide 0.3s forwards; }}}}}&.left1{article{a{&:first-child{z-index: 2;-webkit-animation:left_hide 0.3s forwards; }&:nth-child(2){z-index: 3;-webkit-animation:left_show 0.3s forwards; }}}ul{li{&:first-child{span{-webkit-animation:left_show 0.3s forwards; }}&:nth-child(2){span{-webkit-animation:left_hide 0.3s forwards; }}}}}&.right0{article{a{&:last-child{z-index: 2;-webkit-animation:right_hide 0.3s forwards; }&:first-child{z-index: 3;-webkit-animation:right_show 0.3s forwards; }}}ul{li{&:last-child{span{-webkit-animation:right_show 0.3s forwards; }}&:first-child{span{-webkit-animation:right_hide 0.3s forwards; }}}}}&.right1{article{a{&:first-child{z-index: 2;-webkit-animation:right_hide 0.3s forwards; }&:nth-child(2){z-index: 3;-webkit-animation:right_show 0.3s forwards; }}}ul{li{&:first-child{span{-webkit-animation:right_show 0.3s forwards; }}&:nth-child(2){span{-webkit-animation:right_hide 0.3s forwards; }}}}}//從左側出發@keyframes left_show{0%{transform: translateX(-100%);}100%{transform: translateX(0);}}//從右側出發@keyframes right_show{0%{transform: translateX(100%);}100%{transform: translateX(0);}}//從左側隱藏@keyframes left_hide{0%{transform: translateX(0);}100%{transform: translateX(100%);}}//從右側隱藏@keyframes right_hide{0%{transform: translateX(0);}100%{transform: translateX(-100%);}}article{position: relative;width: 100%;height: 3.58rem;overflow: hidden;a{position: absolute;width: 100%;height: 100%;img{width: 100%;height: 100%;} }}ul{position: absolute;z-index: 3;bottom: 0.24rem;left: 50%;transform: translateX(-50%);display: table;li{position: relative;float: left;width: 0.22rem;height: 0.06rem;margin: 0 0.12rem;background-color: @fe;border-radius: 1rem ;box-shadow: rgba(71,63,64,0.75) 0 2px 2px;font-size: 0;overflow: hidden;span{display: block;width: 100%;height: 100%;background-color: @fff;}}} }

轉載于:https://my.oschina.net/u/3797834/blog/1634765

總結

以上是生活随笔為你收集整理的移动端banner css3(@keyframes )实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。