<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

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

          時間:?2017-11-20閱讀:?1056標簽:?特效作者:?守候

          1.前言

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

          1.文章上面的代碼,雖然代碼很簡單,不難理解,但是也是建議大家邊寫邊看,這樣不會混亂。
          2.文章所提及的小實例,都是很基礎的,大家可以參照自己的想法進行擴展,或者修改,可能會有意想不到的效果。我寫這類型的文章也是想授人以漁,不是授人以魚!
          3.這幾個實例,摘自我自己的平常練習的項目,代碼已經提到github上面了(vue-demos)。歡迎大家star。

          2.開場小動畫運行效果

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

          原理分析

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

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

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

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

          vue方式

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
          </head>
          <style>
            body{
              background: #ccc;
            }
            h1 {
              color: white;
              text-transform: uppercase;
              margin-top: 100px;
              text-align: center;
              font-size: 6rem;
              line-height: 1;
              animation: letterspacing 1s 7 alternate ease-in-out;
              display: block;
              letter-spacing: .5rem;
            }
           
            @keyframes letterspacing {
              0% {
                letter-spacing: -72px;
                filter: blur(20px);
              }
           
              40% {
                filter: blur(6px);
              }
           
              80% {
                letter-spacing: 8px;
                filter: blur(0);
              }
            }
          </style>
          <body>
          <div id="text">
            <h1>{{testText}}</h1>
          </div>
          </body>
          <script src="vue.min.js"></script>
          <script type="text/javascript">
            new Vue({
              el:'#text',
              data:{
                nowIndex:0,
                testText:'歡迎瀏覽'
              },
              mounted(){
                let _this=this;
                let timer = setInterval(function(){
                  _this.nowIndex++;
                  switch (_this.nowIndex) {
                    case 1:
                      _this.testText = '守候的文章';
                      break;
                    case 2:
                      _this.testText = '愿您瀏覽愉快';
                      break;
                    case 3:
                      _this.testText = '學到知識';
                      break;
                  }
                  if (_this.nowIndex > 3) {
                    setTimeout(() => {
                      clearInterval(timer);
                    }, 2000)
                  }
                }, 2000)
              }
            })
          </script>
          </html>

          javascript方式

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
          </head>
          <style>
            body{
              background: #ccc;
            }
            h1 {
              color: white;
              text-transform: uppercase;
              margin-top: 100px;
              text-align: center;
              font-size: 6rem;
              line-height: 1;
              animation: letterspacing 1s 7 alternate ease-in-out;
              display: block;
              letter-spacing: .5rem;
            }
           
            @keyframes letterspacing {
              0% {
                letter-spacing: -6rem;
                filter: blur(1rem);
              }
           
              40% {
                filter: blur(.3rem);
              }
           
              80% {
                letter-spacing: .5rem;
                filter: blur(0rem);
              }
            }
          </style>
          <body>
          <div id="text">
            <h1>歡迎瀏覽</h1>
          </div>
          </body>
          <script>
            var oH1=document.querySelector('h1'),nowIndex=0;
            console.log(oH1)
            var timer = setInterval(function () {
              nowIndex++;
              switch (nowIndex) {
                case 1:
                  oH1.innerHTML = '守候的文章';
                  break;
                case 2:
                  oH1.innerHTML = '愿您瀏覽愉快';
                  break;
                case 3:
                  oH1.innerHTML = '學到知識';
                  break;
              }
              if (nowIndex > 3) {
                setTimeout(() => {
                  clearInterval(timer);
                }, 2000)
              }
            }, 2000)
          </script>
          </html>

          3.導航滑塊運行效果

          原理分析

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

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

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

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

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

          vue方式

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
          </head>
          <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <style>
            .nav{
              margin: 40px;
              position: relative;
            }
          .nav li{
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #09f;
            cursor: pointer;
          }
            .nav span{
              position: relative;
              z-index: 2;
            }
            .nav .slider{
              position: absolute;
              transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);
              width: 100px;
              height: 40px;
              background: #f90;
              top: 0;
              left: 0;
              z-index: 1;
            }
          </style>
          <body>
          <div class="nav clear" id="nav" @mouseleave="nowIndex=0">
            <ul>
              <li @mouseenter.stop="nowIndex=0"><span>Tab One</span></li>
              <li @mouseenter.stop="nowIndex=1"><span>Tab Two</span></li>
              <li @mouseenter.stop="nowIndex=2"><span>Tab Three</span></li>
              <li @mouseenter.stop="nowIndex=3"><span>Tab four</span></li>
              <li @mouseenter.stop="nowIndex=4"><span>Tab five</span></li>
              <li @mouseenter.stop="nowIndex=5"><span>Tab six</span></li>
            </ul>
            <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div>
          </div>
          </body>
          <script src="vue.min.js"></script>
          <script type="text/javascript">
            new Vue({
              el:'#nav',
              data:{
                nowIndex:0
              }
            })
          </script>
          </html>

          javascript方式

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
          </head>
          <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <style>
            .nav{
              position: relative;
            }
          .nav li{
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #09f;
            cursor: pointer;
          }
            .nav span{
              position: relative;
              z-index: 2;
            }
            .nav .slider{
              position: absolute;
              transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);
              width: 100px;
              height: 40px;
              background: #f90;
              top: 0;
              left: 0;
              z-index: 1;
            }
          </style>
          <body>
          <div class="nav clear" id="nav">
            <ul>
              <li><span>Tab One</span></li>
              <li><span>Tab Two</span></li>
              <li><span>Tab Three</span></li>
              <li><span>Tab four</span></li>
              <li><span>Tab five</span></li>
              <li><span>Tab six</span></li>
            </ul>
            <div class="slider"></div>
          </div>
          </body>
          <script type="text/javascript">
            var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider");
            oDiv.addEventListener("mouseleave",function () {
              oSlider.style.transform='translate3d(0,0,0)';
            })
            for(var i=0;i<oLi.length;i++){
              oLi[i].index=i;
              oLi[i].addEventListener("mouseenter",function (e) {
                oSlider.style.transform='translate3d('+this.index*100+'px,0,0)';
              })
            }
          </script>
          </html>

          4.輪播圖運行效果

          原理分析

          藍框的是li,黑框的是div

          初始化狀態

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

          看到上面,其實也就是控制ul的偏移量(transform:translate3d)。計算公式和上面的滑塊相似,索引(0|1|2|3)*li的寬度。不同的就是,ul的偏移量是取負數,因為ul是想左偏,上面的滑塊是向右偏!
          當第一張圖片的時候,ul偏移量設置(transform: translate3d(0px, 0px, 0px))。
          當第二張圖片的時候,ul偏移量設置(transform: translate3d(-1000px, 0px, 0px))。
          當第二張圖片的時候,ul偏移量設置(transform: translate3d(-2000px, 0px, 0px))。以此類推,偏移量很簡單的就能計算出來!

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

          vue方式

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
            <style>
              .slide-img {
                width: 1000px;
                height: 500px;
                overflow: hidden;
                position: relative;
                margin: 20px auto;
              }
           
              ul {
                transition: all .5s ease;
              }
           
              li {
                float: left;
              }
           
              .slide-arrow div {
                width: 50px;
                height: 100px;
                position: absolute;
                margin: auto;
                top: 0;
                bottom: 0;
                background: url("
              }
           
              .arrow-right {
                transform: rotate(180deg);
                right: 0;
              }
           
              .arrow-left {
                left: 0;
              }
              .slide-option{
                position: absolute;
                bottom: 10px;
                width: 100%;
                left: 0;
                text-align: center;
              }
              .slide-option span{
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 100%;
                background: #ccc;
                margin: 0 10px;
              }
              .slide-option .active{
                background: #09f;
              }
            </style>
          </head>
          <body>
          <div class="slide-img clear" id="slide-img">
            <!--用tran這個class控制ul是否含有過渡效果,樣式已經寫好-->
            <ul :style="{'width':(listWidth*list.length)+'px','transform':'translate3d(-'+(listWidth*nowIndex)+'px,0,0)'}">
              <!--遍歷出來的圖片-->
              <li v-for="(li,index) in list" :style="{'width':listWidth+'px'}">
                <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
                  <img :src="li" class="slider-img"/>
                </a>
              </li>
            </ul>
            <div class="slide-option">
              <span v-for="(li,index) in list" :class="{'active':index===nowIndex}"></span>
            </div>
            <div class="slide-arrow">
              <div class="arrow-left" @click.stop="switchDo('reduce')"></div>
              <div class="arrow-right" @click.stop="switchDo"></div>
            </div>
          </div>
          </body>
          <script src="vue.min.js"></script>
          <script type="text/javascript">
            new Vue({
              el: '#slide-img',
              data: {
                nowIndex: 0,
                listWidth: '1000',
                list: ['./images/timg1.jpg', './images/timg2.jpg', './images/timg3.jpg', './images/timg4.jpg'],
                timer:null
              },
              methods: {
                //滑動操作
                switchDo(reduce){
                  clearInterval(this.timer);
                  //根據reduce判斷this.nowIndex的增加或者減少!
                  if(reduce==='reduce'){
                    //如果是第一張,就返回最后一張
                    if(this.nowIndex===0){
                      this.nowIndex=this.list.length-1;
                    }
                    else{
                      this.nowIndex--;
                    }
                  }
                  else{
                    //如果是最后一張,就返回第一張
                    if(this.nowIndex===this.list.length-1){
                      this.nowIndex=0;
                    }
                    else{
                      this.nowIndex++;
                    }
                  }
                  var _this=this;
                  this.timer=setInterval(function () {
                    _this.switchDo();
                  },4000)
           
                },
              },
              mounted(){
                var _this=this;
                this.timer=setInterval(function () {
                  _this.switchDo();
                },4000)
              }
            })
          </script>
          </html>

          javascript方式

          <!DOCTYPE html>
          <html lang="en">
          <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
            <style>
              .slide-img {
                width: 1000px;
                height: 500px;
                overflow: hidden;
                position: relative;
                margin: 20px auto;
              }
           
              ul {
                transition: all .5s ease;
              }
           
              li {
                float: left;
              }
           
              .slide-arrow div {
                width: 50px;
                height: 100px;
                position: absolute;
                margin: auto;
                top: 0;
                bottom: 0;
                background: url("
              }
           
              .arrow-right {
                transform: rotate(180deg);
                right: 0;
              }
           
              .arrow-left {
                left: 0;
              }
              .slide-option{
                position: absolute;
                bottom: 10px;
                width: 100%;
                left: 0;
                text-align: center;
              }
              .slide-option span{
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 100%;
                background: #ccc;
                margin: 0 10px;
              }
              .slide-option .active{
                background: #09f;
              }
            </style>
          </head>
          <body>
          <div class="slide-img clear" id="slide-img">
            <!--用tran這個class控制ul是否含有過渡效果,樣式已經寫好-->
            <ul id="slide-img-ul">
              <!--遍歷出來的圖片-->
              <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg1.jpg" class="slider-img"/></a></li>
              <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg2.jpg" class="slider-img"/></a></li>
              <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg3.jpg" class="slider-img"/></a></li>
              <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg4.jpg" class="slider-img"/></a></li>
            </ul>
            <div class="slide-option">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="slide-arrow">
              <div class="arrow-left"></div>
              <div class="arrow-right"></div>
            </div>
          </div>
          </body>
          <script type="text/javascript">
            window.onload=function () {
              var oUl=document.querySelector('#slide-img-ul');
              var oLi=oUl.querySelectorAll('li');
              var oSpan=document.querySelector('.slide-option').querySelectorAll('span');
              var oArrowLeft=document.querySelector('.arrow-left');
              var oArrowRight=document.querySelector('.arrow-right');
              oUl.style.width='4000px';
              oArrowLeft.addEventListener('click',function () {
                switchDo('reduce');
              })
              oArrowRight.addEventListener('click',function () {
                switchDo();
              })
              var timer=null,nowIndex=0;
              function switchDo(reduce){
                clearInterval(timer);
                //設置樣式
                oUl.style.transform='translate3d(-'+(1000*nowIndex)+'px,0,0)';
                for (var i=0;i<oSpan.length;i++){
                  if(i===nowIndex){
                    oSpan[i].className='active';
                  }
                  else{
                    oSpan[i].className='';
                  }
                }
                //根據reduce判斷this.nowIndex的增加或者減少!
                if(reduce==='reduce'){
                  //如果是第一張,就返回最后一張
                  if(nowIndex===0){
                    nowIndex=oLi.length-1;
                  }
                  else{
                    nowIndex--;
                  }
                }
                else{
                  //如果是最后一張,就返回第一張
                  if(nowIndex===oLi.length-1){
                    nowIndex=0;
                  }
                  else{
                    nowIndex++;
                  }
                }
                timer=setInterval(function () {
                  switchDo();
                },4000)
              }
              switchDo();
            }
          </script>
          </html>

          5.小結

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

          原文鏈接:https://segmentfault.com/a/1190000012073091

          站長推薦

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/125

          canvas+js實現數字雨特效【字符下落特效】

          用dropLine這個列表來記錄繪制過程,dropLine[i]的意義是表示在第i列,第dropLine[i]行繪制!filltext()是canvas中的方法,這里的三個參數分別對應:內容,橫坐標,縱坐標。

          純css3實現二維碼掃描特效

          第一步,實現網格背景:第二部實現掃碼線以及漸變背景特效,四角特效就是四個寬高相等的正方形,分別設置邊框即可。設置掃描動畫

          純CSS3仿網易云孤獨星球特效

          今天收聽網易云音樂時看到孤獨星球的特效,于是就順手搬到這里了。孤獨星球特效本身沒有什么難點,但如果要加入音軌控制星球運動頻率就有點麻煩了

          原生JS實現旋轉木馬輪播圖特效

          當用戶點擊左右箭頭時,讓數組進行相應變化(如果點擊右箭頭,就刪除數組最后那個元素,把它添加到最前邊;如果點擊左箭頭,就刪除數組最前邊那個元素,把它添加到最后邊),改變完數組再調用一下move()函數(讓圖片輪播)

          只需三步,實時多邊形折射

          在本教程中,您將學習如何使用Three.js在三個步驟中使對象看起來像玻璃。渲染3D對象時,無論使用某種3D軟件還是使用WebGL進行實時顯示,始終都必須為其分配材料以使其可見并具有所需的外觀。

          基于 HTML5 Canvas 實現的文字動畫特效

          文字是網頁中最基本的元素,一般我們在網頁上都是展示的靜態文字,但是就效果來說,還是比較枯燥的。文字淡入淡出的動畫效果在項目中非常實用,如果有某些關鍵的文字,可以通過這種動態的效果來提醒用戶閱讀

          js實現圖片放大鏡特效

          在平時網上商城購物時,我們能夠通過放大鏡效果來使我們看圖片能夠更加的清楚,今天我就來給大家分享一下我學習的放大鏡特效

          VUE路由轉場特效,WebAPP的前進與后退

          定義兩個 CSS 過度動畫,前進與后退: slide-right-enter 和 slide-left-enter,給路由配置meta信息,設置各個路由的級別: index,監控路由跳轉,比對 meta 信息級別,如果從大跳轉到小說明是返回,從小跳轉到大則是前進

          純 CSS 創作出平滑的層疊海浪特效

          這里的波浪只是側面的,利用幾個平面一部分弧旋轉得到。定義 dom,容器中包含一行文本和3條做海浪特效的 <span>,設置容器,文字樣式,制作海浪動畫效果

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网