1.前言
做專案就難免會開發互動效果或者特效，而我最近開發的專案一直在使用vue，開發技術棧方面，理所當然就使用了vue+css3開發，過程中發現使用vue+css3開發特效，和j**ascript/jquery+css3的思維方式不一樣，但是比j**ascript/jquery+css3簡單一點點。今天就分享三個簡單的小例項，希望能起到拓展思維的作用，讓大家明白vue+css3應該怎樣開發互動效果！如果大家有什麼好的建議，或者覺得我**寫錯了，歡迎指出！
1.文章上面的**，雖然**很簡單，不難理解，但是也是建議大家邊寫邊看，這樣不會混亂。
2.文章所提及的小例項，都是很基礎的，大家可以參照自己的想法進行擴充套件，或者修改，可能會有意想不到的效果。我寫這型別的文章也是想授人以漁，不是授人以魚！
3.這幾個例項，摘自我自己的平常練習的專案，**已經提到github上面了(vue-demos)。歡迎大家star。
2.開場小動畫執行效果
gif圖模糊效果看著跟實際效果不太一樣！大家注意！
原理分析
說到原理分析，其實也沒什麼可以分析的，就是在頁面是下面這個狀態的時候，把文字替換掉。至於看到字型縮成一團，就是letter-spacing這個css屬性的控制效果。字型模糊就是filter: blur()這個css屬性的控制效果！看到有逐漸的變化，就是css3動畫（animation）的效果
下面簡單分析下，這個動畫的幾個步驟，從下面看到，這個動畫一共8個步驟。
這下就清晰明了了，我們要在下圖這個瞬間開始改變文字，也就是頁面載入了兩秒後，動畫執行了兩次後就開始改變文字。然後每隔兩秒改變一次文字，直到最後！
下面給出vue和j**ascript兩種方式的**，看下哪種方式更加的簡單！
vue方式
title
j**ascript方式
title
3.導航滑塊執行效果
原理分析
首先，下面是頁面初始化的時候，橙色滑塊的位置
滑鼠放到第二個tab上面，大家可以看到，橙色滑塊就是向右偏移了乙個tab的距離
滑鼠放到第三個tab上面，大家可以看到，橙色滑塊就是向右偏移了兩個tab的距離
如果從第乙個tab到第六個tab的索引是0,1,2,3,4,5。
那麼滑塊的公式就是（索引*tab的寬度）。大家看到有逐漸過去的效果，其實是css3過渡（transition）的效果。大家看下面的**就行了，一看就懂！**如下：
vue方式
www.cppcns.comead>
title
做專案與做產品的區別詳解
做專案的第一要求是在要求的時間內開發出滿足客戶需求的軟體，它的第一準則是客戶永遠是對的，開發者必須按客戶要求的做，但是因為客戶提出的要求往 往是發散的 弱邏輯的 非系統的，所以開發出的軟體需要很多硬編碼，再加上時間緊迫，不能對已經開發出來的模組進行必要的重構，專案最終越來越難以維護，效能越來越差。而...
函式詳解 3
對於給定的連線，返回含有最近返回狀態的與mysql相關的函式的錯誤訊息字串。空值意味著未出現錯誤。link mysql pconnect localhost sunsoft suixiang ordie couldnotconnect print connectedsuccessfully quer...
flex彈性盒子做骰子詳解
網頁布局是css的乙個重點應用。我們傳統的布局的解決方案是基於盒裝模型，依賴display屬性 position屬性 float屬性。而這種布局相對來說不是很方便，類似垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種瀏覽器的支援，這就意味著，...