自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

也許vue+css3做交互特效更簡單

作者：守候
開發(fā) 前端
今天就分享三個簡單的小實例，希望能起到拓展思維的作用，讓大家明白vue+css3應該怎樣開發(fā)交互效果！如果大家有什么好的建議，或者覺得我哪里寫錯了，歡迎指出！
 

1、前言

做項目就難免會開發(fā)交互效果或者特效，而我最近開發(fā)的項目一直在使用vue，開發(fā)技術(shù)棧方面，理所當然就使用了vue+css3開發(fā)，過程中發(fā)現(xiàn)使用vue+css3開發(fā)特效，和javascript/jquery+css3的思維方式不一樣，但是比javascript/jquery+css3簡單一點點。今天就分享三個簡單的小實例，希望能起到拓展思維的作用，讓大家明白vue+css3應該怎樣開發(fā)交互效果！如果大家有什么好的建議，或者覺得我哪里寫錯了，歡迎指出！

    1.文章上面的代碼，雖然代碼很簡單，不難理解，但是也是建議大家邊寫邊看，這樣不會混亂。

    2.文章所提及的小實例，都是很基礎(chǔ)的，大家可以參照自己的想法進行擴展，或者修改，可能會有意想不到的效果。我寫這類型的文章也是想授人以漁，不是授人以魚！

    3.這幾個實例，摘自我自己的平常練習的項目，代碼已經(jīng)提到github上面了(vue-demos)。歡迎大家star。

2、開場小動畫

運行效果

gif圖模糊效果看著跟實際效果不太一樣！大家注意！

原理分析

說到原理分析，其實也沒什么可以分析的，就是在頁面是下面這個狀態(tài)的時候，把文字替換掉。至于看到字體縮成一團，就是letter-spacing這個css屬性的控制效果。字體模糊就是filter: blur()這個css屬性的控制效果！看到有逐漸的變化，就是css3動畫（animation）的效果

下面簡單分析下，這個動畫的幾個步驟，從下面看到，這個動畫一共8個步驟。

這下就清晰明了了，我們要在下圖這個瞬間開始改變文字，也就是頁面加載了兩秒后，動畫執(zhí)行了兩次后就開始改變文字。然后每隔兩秒改變一次文字，直到最后！

下面給出vue和javascript兩種方式的代碼，看下哪種方式更加的簡單！

vue方式

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Title</title> 
  6. </head> 
  7. <style> 
  8.     body{ 
  9.         background: #ccc; 
  10.     } 
  11.     h1 { 
  12.         color: white; 
  13.         text-transform: uppercase; 
  14.         margin-top: 100px; 
  15.         text-align: center; 
  16.         font-size: 6rem; 
  17.         line-height: 1; 
  18.         animation: letterspacing 1s 7 alternate ease-in-out; 
  19.         display: block; 
  20.         letter-spacing: .5rem; 
  21.     } 
  22.  
  23.     @keyframes letterspacing { 
  24.         0% { 
  25.             letter-spacing: -72px; 
  26.             filter: blur(20px); 
  27.         } 
  28.  
  29.         40% { 
  30.             filter: blur(6px); 
  31.         } 
  32.  
  33.         80% { 
  34.             letter-spacing: 8px; 
  35.             filter: blur(0); 
  36.         } 
  37.     } 
  38. </style> 
  39. <body> 
  40. <div id="text"> 
  41.     <h1>{{testText}}</h1> 
  42. </div> 
  43. </body> 
  44. <script src="vue.min.js"></script> 
  45. <script type="text/javascript"> 
  46.     new Vue({ 
  47.         el:'#text', 
  48.         data:{ 
  49.             nowIndex:0, 
  50.             testText:'歡迎瀏覽' 
  51.         }, 
  52.         mounted(){ 
  53.             let _this=this; 
  54.             let timer = setInterval(function(){ 
  55.                 _this.nowIndex++; 
  56.                 switch (_this.nowIndex) { 
  57.                     case 1: 
  58.                         _this.testText = '守候的文章'; 
  59.                         break; 
  60.                     case 2: 
  61.                         _this.testText = '愿您瀏覽愉快'; 
  62.                         break; 
  63.                     case 3: 
  64.                         _this.testText = '學到知識'; 
  65.                         break; 
  66.                 } 
  67.                 if (_this.nowIndex > 3) { 
  68.                     setTimeout(() => { 
  69.                         clearInterval(timer); 
  70.                     }, 2000) 
  71.                 } 
  72.             }, 2000) 
  73.         } 
  74.     }) 
  75. </script> 
  76. </html> 

javascript方式

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Title</title> 
  6. </head> 
  7. <style> 
  8.     body{ 
  9.         background: #ccc; 
  10.     } 
  11.     h1 { 
  12.         color: white; 
  13.         text-transform: uppercase; 
  14.         margin-top: 100px; 
  15.         text-align: center; 
  16.         font-size: 6rem; 
  17.         line-height: 1; 
  18.         animation: letterspacing 1s 7 alternate ease-in-out; 
  19.         display: block; 
  20.         letter-spacing: .5rem; 
  21.     } 
  22.  
  23.     @keyframes letterspacing { 
  24.         0% { 
  25.             letter-spacing: -6rem; 
  26.             filter: blur(1rem); 
  27.         } 
  28.  
  29.         40% { 
  30.             filter: blur(.3rem); 
  31.         } 
  32.  
  33.         80% { 
  34.             letter-spacing: .5rem; 
  35.             filter: blur(0rem); 
  36.         } 
  37.     } 
  38. </style> 
  39. <body> 
  40. <div id="text"> 
  41.     <h1>歡迎瀏覽</h1> 
  42. </div> 
  43. </body> 
  44. <script> 
  45.     var oH1=document.querySelector('h1'),nowIndex=0; 
  46.     console.log(oH1) 
  47.     var timer = setInterval(function () { 
  48.         nowIndex++; 
  49.         switch (nowIndex) { 
  50.             case 1: 
  51.                 oH1.innerHTML = '守候的文章'; 
  52.                 break; 
  53.             case 2: 
  54.                 oH1.innerHTML = '愿您瀏覽愉快'; 
  55.                 break; 
  56.             case 3: 
  57.                 oH1.innerHTML = '學到知識'; 
  58.                 break; 
  59.         } 
  60.         if (nowIndex > 3) { 
  61.             setTimeout(() => { 
  62.                 clearInterval(timer); 
  63.             }, 2000) 
  64.         } 
  65.     }, 2000) 
  66. </script> 
  67. </html> 

3、導航滑塊

運行效果

原理分析

首先，下面是頁面初始化的時候，橙色滑塊的位置

鼠標放到第二個tab上面，大家可以看到，橙色滑塊就是向右偏移了一個tab的距離

鼠標放到第三個tab上面，大家可以看到，橙色滑塊就是向右偏移了兩個tab的距離

如果從第一個tab到第六個tab的索引是0,1,2,3,4,5。

那么滑塊的公式就是（索引*tab的寬度）。大家看到有逐漸過去的效果，其實是css3過渡（transition）的效果。大家看下面的代碼就行了，一看就懂！代碼如下：

vue方式

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Title</title> 
  6. </head> 
  7. <link rel="stylesheet" href="reset.css"> 
  8. <style> 
  9.     .nav{ 
  10.         margin: 40px; 
  11.         position: relative; 
  12.     } 
  13. .nav li{ 
  14.     float: left; 
  15.     width: 100px; 
  16.     height: 40px; 
  17.     line-height: 40px; 
  18.     color: #fff; 
  19.     text-align: center; 
  20.     background: #09f; 
  21.     cursor: pointer; 
  22. } 
  23.     .nav span{ 
  24.         position: relative; 
  25.         z-index: 2; 
  26.     } 
  27.     .nav .slider{ 
  28.         position: absolute; 
  29.         transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); 
  30.         width: 100px; 
  31.         height: 40px; 
  32.         background: #f90; 
  33.         top: 0; 
  34.         left: 0; 
  35.         z-index: 1; 
  36.     } 
  37. </style> 
  38. <body> 
  39. <div class="nav clear" id="nav" @mouseleave="nowIndex=0"> 
  40.     <ul> 
  41.         <li @mouseenter.stop="nowIndex=0"><span>Tab One</span></li> 
  42.         <li @mouseenter.stop="nowIndex=1"><span>Tab Two</span></li> 
  43.         <li @mouseenter.stop="nowIndex=2"><span>Tab Three</span></li> 
  44.         <li @mouseenter.stop="nowIndex=3"><span>Tab four</span></li> 
  45.         <li @mouseenter.stop="nowIndex=4"><span>Tab five</span></li> 
  46.         <li @mouseenter.stop="nowIndex=5"><span>Tab six</span></li> 
  47.     </ul> 
  48.     <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div> 
  49. </div> 
  50. </body> 
  51. <script src="vue.min.js"></script> 
  52. <script type="text/javascript"> 
  53.    new Vue({ 
  54.        el:'#nav', 
  55.        data:{ 
  56.            nowIndex:0 
  57.        } 
  58.    }) 
  59. </script> 
  60. </html> 

javascript方式

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Title</title> 
  6. </head> 
  7. <link rel="stylesheet" href="reset.css"> 
  8. <style> 
  9.     .nav{ 
  10.         position: relative; 
  11.     } 
  12. .nav li{ 
  13.     float: left; 
  14.     width: 100px; 
  15.     height: 40px; 
  16.     line-height: 40px; 
  17.     color: #fff; 
  18.     text-align: center; 
  19.     background: #09f; 
  20.     cursor: pointer; 
  21. } 
  22.     .nav span{ 
  23.         position: relative; 
  24.         z-index: 2; 
  25.     } 
  26.     .nav .slider{ 
  27.         position: absolute; 
  28.         transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); 
  29.         width: 100px; 
  30.         height: 40px; 
  31.         background: #f90; 
  32.         top: 0; 
  33.         left: 0; 
  34.         z-index: 1; 
  35.     } 
  36. </style> 
  37. <body> 
  38. <div class="nav clear" id="nav"> 
  39.     <ul> 
  40.         <li><span>Tab One</span></li> 
  41.         <li><span>Tab Two</span></li> 
  42.         <li><span>Tab Three</span></li> 
  43.         <li><span>Tab four</span></li> 
  44.         <li><span>Tab five</span></li> 
  45.         <li><span>Tab six</span></li> 
  46.     </ul> 
  47.     <div class="slider"></div> 
  48. </div> 
  49. </body> 
  50. <script type="text/javascript"> 
  51.     var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider"); 
  52.     oDiv.addEventListener("mouseleave",function () { 
  53.         oSlider.style.transform='translate3d(0,0,0)'; 
  54.     }) 
  55.     for(var i=0;i<oLi.length;i++){ 
  56.         oLi[i].index=i; 
  57.         oLi[i].addEventListener("mouseenter",function (e) { 
  58.             oSlider.style.transform='translate3d('+this.index*100+'px,0,0)'; 
  59.         }) 
  60.     } 
  61. </script> 
  62. </html> 

4、輪播圖

運行效果

原理分析

藍框的是li，黑框的是div

初始化狀態(tài)

處于顯示第二張圖片的時候

看到上面，其實也就是控制ul的偏移量（transform:translate3d）。計算公式和上面的滑塊相似，索引（0|1|2|3）*li的寬度。不同的就是，ul的偏移量是取負數(shù)，因為ul是想左偏，上面的滑塊是向右偏！

當?shù)谝粡垐D片的時候，ul偏移量設(shè)置（transform: translate3d(0px, 0px, 0px)）。

當?shù)诙垐D片的時候，ul偏移量設(shè)置（transform: translate3d(-1000px, 0px, 0px)）。

當?shù)诙垐D片的時候，ul偏移量設(shè)置（transform: translate3d(-2000px, 0px, 0px)）。以此類推，偏移量很簡單的就能計算出來！

可能我說的大家有點懵，但是，看下面的代碼，就不會懵了，因為代碼也很簡單！

vue方式

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Title</title> 
  6.     <link rel="stylesheet" href="reset.css"> 
  7.     <style> 
  8.         .slide-img { 
  9.             width: 1000px; 
  10.             height: 500px; 
  11.             overflow: hidden; 
  12.             position: relative; 
  13.             margin: 20px auto; 
  14.         } 
  15.  
  16.         ul { 
  17.             transition: all .5s ease; 
  18.         } 
  19.  
  20.         li { 
  21.             float: left; 
  22.         } 
  23.  
  24.         .slide-arrow div { 
  25.             width: 50px; 
  26.             height: 100px; 
  27.             position: absolute; 
  28.             margin: auto; 
  29.             top: 0; 
  30.             bottom: 0; 
  31.             background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat; 
  32.         } 
  33.  
  34.         .arrow-right { 
  35.             transform: rotate(180deg); 
  36.             right: 0; 
  37.         } 
  38.  
  39.         .arrow-left { 
  40.             left: 0; 
  41.         } 
  42.         .slide-option{ 
  43.             position: absolute; 
  44.             bottom: 10px; 
  45.             width: 100%; 
  46.             left: 0; 
  47.             text-align: center; 
  48.         } 
  49.         .slide-option span{ 
  50.             display: inline-block; 
  51.             width: 14px; 
  52.             height: 14px; 
  53.             border-radius: 100%; 
  54.             background: #ccc; 
  55.             margin: 0 10px; 
  56.         } 
  57.         .slide-option .active{ 
  58.             background: #09f; 
  59.         } 
  60.     </style> 
  61. </head> 
  62. <body> 
  63. <div class="slide-img clear" id="slide-img"> 
  64.     <!--用tran這個class控制ul是否含有過渡效果，樣式已經(jīng)寫好--> 
  65.     <ul :style="{'width':(listWidth*list.length)+'px','transform':'translate3d(-'+(listWidth*nowIndex)+'px,0,0)'}"> 
  66.         <!--遍歷出來的圖片--> 
  67.         <li v-for="(li,index) in list" :style="{'width':listWidth+'px'}"> 
  68.             <a href="javascript:;"> 
  69.                 <img :src="li" class="slider-img"/> 
  70.             </a> 
  71.         </li> 
  72.     </ul> 
  73.     <div class="slide-option"> 
  74.         <span v-for="(li,index) in list" :class="{'active':index===nowIndex}"></span> 
  75.     </div> 
  76.     <div class="slide-arrow"> 
  77.         <div class="arrow-left" @click.stop="switchDo('reduce')"></div> 
  78.         <div class="arrow-right" @click.stop="switchDo"></div> 
  79.     </div> 
  80. </div> 
  81. </body> 
  82. <script src="vue.min.js"></script> 
  83. <script type="text/javascript"> 
  84.     new Vue({ 
  85.         el: '#slide-img', 
  86.         data: { 
  87.             nowIndex: 0, 
  88.             listWidth: '1000', 
  89.             list: ['./images/timg1.jpg', './images/timg2.jpg', './images/timg3.jpg', './images/timg4.jpg'], 
  90.             timer:null 
  91.         }, 
  92.         methods: { 
  93.             //滑動操作 
  94.             switchDo(reduce){ 
  95.                 clearInterval(this.timer); 
  96.                 //根據(jù)reduce判斷this.nowIndex的增加或者減少！ 
  97.                 if(reduce==='reduce'){ 
  98.                     //如果是第一張，就返回最后一張 
  99.                     if(this.nowIndex===0){ 
  100.                         this.nowIndex=this.list.length-1; 
  101.                     } 
  102.                     else{ 
  103.                         this.nowIndex--; 
  104.                     } 
  105.                 } 
  106.                 else{ 
  107.                     //如果是最后一張，就返回第一張 
  108.                     if(this.nowIndex===this.list.length-1){ 
  109.                         this.nowIndex=0; 
  110.                     } 
  111.                     else{ 
  112.                         this.nowIndex++; 
  113.                     } 
  114.                 } 
  115.                 var _this=this; 
  116.                 this.timer=setInterval(function () { 
  117.                     _this.switchDo(); 
  118.                 },4000) 
  119.  
  120.             }, 
  121.         }, 
  122.         mounted(){ 
  123.             var _this=this; 
  124.             this.timer=setInterval(function () { 
  125.                 _this.switchDo(); 
  126.             },4000) 
  127.         } 
  128.     }) 
  129. </script> 
  130. </html> 

javascript方式

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>Title</title> 
  6.     <link rel="stylesheet" href="reset.css"> 
  7.     <style> 
  8.         .slide-img { 
  9.             width: 1000px; 
  10.             height: 500px; 
  11.             overflow: hidden; 
  12.             position: relative; 
  13.             margin: 20px auto; 
  14.         } 
  15.  
  16.         ul { 
  17.             transition: all .5s ease; 
  18.         } 
  19.  
  20.         li { 
  21.             float: left; 
  22.         } 
  23.  
  24.         .slide-arrow div { 
  25.             width: 50px; 
  26.             height: 100px; 
  27.             position: absolute; 
  28.             margin: auto; 
  29.             top: 0; 
  30.             bottom: 0; 
  31.             background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat; 
  32.         } 
  33.  
  34.         .arrow-right { 
  35.             transform: rotate(180deg); 
  36.             right: 0; 
  37.         } 
  38.  
  39.         .arrow-left { 
  40.             left: 0; 
  41.         } 
  42.         .slide-option{ 
  43.             position: absolute; 
  44.             bottom: 10px; 
  45.             width: 100%; 
  46.             left: 0; 
  47.             text-align: center; 
  48.         } 
  49.         .slide-option span{ 
  50.             display: inline-block; 
  51.             width: 14px; 
  52.             height: 14px; 
  53.             border-radius: 100%; 
  54.             background: #ccc; 
  55.             margin: 0 10px; 
  56.         } 
  57.         .slide-option .active{ 
  58.             background: #09f; 
  59.         } 
  60.     </style> 
  61. </head> 
  62. <body> 
  63. <div class="slide-img clear" id="slide-img"> 
  64.     <!--用tran這個class控制ul是否含有過渡效果，樣式已經(jīng)寫好--> 
  65.     <ul id="slide-img-ul"> 
  66.         <!--遍歷出來的圖片--> 
  67.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg1.jpg" class="slider-img"/></a></li> 
  68.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg2.jpg" class="slider-img"/></a></li> 
  69.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg3.jpg" class="slider-img"/></a></li> 
  70.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg4.jpg" class="slider-img"/></a></li> 
  71.     </ul> 
  72.     <div class="slide-option"> 
  73.         <span></span> 
  74.         <span></span> 
  75.         <span></span> 
  76.         <span></span> 
  77.     </div> 
  78.     <div class="slide-arrow"> 
  79.         <div class="arrow-left"></div> 
  80.         <div class="arrow-right"></div> 
  81.     </div> 
  82. </div> 
  83. </body> 
  84. <script type="text/javascript"> 
  85.     window.onload=function () { 
  86.         var oUl=document.querySelector('#slide-img-ul'); 
  87.         var oLi=oUl.querySelectorAll('li'); 
  88.         var oSpan=document.querySelector('.slide-option').querySelectorAll('span'); 
  89.         var oArrowLeft=document.querySelector('.arrow-left'); 
  90.         var oArrowRight=document.querySelector('.arrow-right'); 
  91.         oUl.style.width='4000px'; 
  92.         oArrowLeft.addEventListener('click',function () { 
  93.             switchDo('reduce'); 
  94.         }) 
  95.         oArrowRight.addEventListener('click',function () { 
  96.             switchDo(); 
  97.         }) 
  98.         var timer=null,nowIndex=0; 
  99.         function switchDo(reduce){ 
  100.             clearInterval(timer); 
  101.             //設(shè)置樣式 
  102.             oUl.style.transform='translate3d(-'+(1000*nowIndex)+'px,0,0)'; 
  103.             for (var i=0;i<oSpan.length;i++){ 
  104.                 if(i===nowIndex){ 
  105.                     oSpan[i].className='active'; 
  106.                 } 
  107.                 else{ 
  108.                     oSpan[i].className=''; 
  109.                 } 
  110.             } 
  111.             //根據(jù)reduce判斷this.nowIndex的增加或者減少！ 
  112.             if(reduce==='reduce'){ 
  113.                 //如果是第一張，就返回最后一張 
  114.                 if(nowIndex===0){ 
  115.                     nowIndex=oLi.length-1; 
  116.                 } 
  117.                 else{ 
  118.                     nowIndex--; 
  119.                 } 
  120.             } 
  121.             else{ 
  122.                 //如果是最后一張，就返回第一張 
  123.                 if(nowIndex===oLi.length-1){ 
  124.                     nowIndex=0; 
  125.                 } 
  126.                 else{ 
  127.                     nowIndex++; 
  128.                 } 
  129.             } 
  130.             timer=setInterval(function () { 
  131.                 switchDo(); 
  132.             },4000) 
  133.         } 
  134.         switchDo(); 
  135.     } 
  136. </script> 
  137. </html> 

5、小結(jié)

好了，關(guān)于vue+css3開發(fā)的特效，以及和javascript+css3的對比，就說到這里了，希望這三個小實例，能幫到大家了解下應該怎么使用vue+css3開發(fā)特效的。今天講這三個小實例不是說給大家代碼，讓大家復制粘貼使用，而是希望能起到一個拋磚引玉的作用，拓展思維的作用！就像我之前寫文章說得那樣，我寫文章是希望能起到一個授人以漁的作用，而不是授人以魚！最后，如果大家覺得有什么地方我寫錯了，寫錯不好，或者有其它什么建議，歡迎指出！讓大家相互學習，共同進步！ 

責任編輯：龐桂玉 來源： segmentfault
Javascriptvue.jscss3
相關(guān)推薦

2019-03-11 15:26:26

HTTPSHTTP密鑰

2019-10-25 09:35:58

HTTPSHTTP通信

2019-11-13 09:08:50

HTTPS安全加密算法

2015-01-19 17:44:02

Cocos引擎3D特效

2013-11-25 17:14:33

Windows 9

2019-11-15 09:26:36

OAuthWeb系統(tǒng)

2012-05-24 11:03:55

HTML5

2013-04-10 09:28:24

CSS3CSS

2011-11-25 13:18:40

HTML 5

2023-12-25 09:41:37

點云訓練

2010-09-14 20:02:14

2012-02-24 09:11:45

jQuery

2013-07-31 14:19:06

Windows 8.1

2011-02-17 10:54:59

CSS3變換 簡單快捷

2017-04-11 13:52:02

華為

2017-04-12 16:27:52

華為

2011-12-16 11:11:36

HTML 5

2021-01-20 14:25:53

Vue3CSS前端

2021-08-23 13:25:25

Vue3CSS前端

2017-02-17 12:30:40

外設(shè)
點贊
收藏

51CTO技術(shù)棧公眾號