网络小说排行榜,手机推荐排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

詳解vue+css3做交互特效的方法

1.前言

紅花崗網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),紅花崗網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為紅花崗成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請找那個售后服務(wù)好的紅花崗做網(wǎng)站的公司定做！

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

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

2.開場小動畫運行效果

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

詳解vue+css3做交互特效的方法

原理分析

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

詳解vue+css3做交互特效的方法

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

詳解vue+css3做交互特效的方法

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

詳解vue+css3做交互特效的方法

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

vue方式




  
  Title




  {{testText}}

javascript方式




  
  Title




  歡迎瀏覽

3.導(dǎo)航滑塊運行效果

詳解vue+css3做交互特效的方法

原理分析

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

詳解vue+css3做交互特效的方法

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

詳解vue+css3做交互特效的方法

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

詳解vue+css3做交互特效的方法

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

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

vue方式




  
  Title





  
    Tab One
    Tab Two
    Tab Three
    Tab four
    Tab five
    Tab six

javascript方式




  
  Title





  
    Tab One
    Tab Two
    Tab Three
    Tab four
    Tab five
    Tab six

4.輪播圖運行效果

詳解vue+css3做交互特效的方法

原理分析

藍框的是li，黑框的是div

初始化狀態(tài)

詳解vue+css3做交互特效的方法

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

詳解vue+css3做交互特效的方法

看到上面，其實也就是控制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方式




  
  Title

javascript方式




  
  Title

5.小結(jié)

好了，關(guān)于vue+css3開發(fā)的特效，以及和javascript+css3的對比，就說到這里了，希望這三個小實例，能幫到大家了解下應(yīng)該怎么使用vue+css3開發(fā)特效的。今天講這三個小實例不是說給大家代碼，讓大家復(fù)制粘貼使用，而是希望能起到一個拋磚引玉的作用，拓展思維的作用！就像我之前寫文章說得那樣，我寫文章是希望能起到一個授人以漁的作用，而不是授人以魚！最后，如果大家覺得有什么地方我寫錯了，寫錯不好，或者有其它什么建議，歡迎指出！讓大家相互學(xué)習(xí)，共同進步！也希望大家多多支持創(chuàng)新互聯(lián)！?。?/p>
網(wǎng)頁名稱：詳解vue+css3做交互特效的方法
文章URL：http://fisionsoft.com.cn/article/ijojjs.html

新聞中心

{{testText}}

歡迎瀏覽

其他資訊