整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
不是還在為網(wǎng)頁交互感不友好而拍著鍵盤找特效？其實在咱們學習的過程當中就已經(jīng)可以寫出好玩、炫酷的特效了，只是你還沒有發(fā)現(xiàn)。當細心的操作過后，不僅要拍著大腿說自己怎么沒想到，更要進行反思，怎樣學習才能將知識點熟練的進行應用。那么現(xiàn)在，我們就一起動手來做一個網(wǎng)頁開始的動畫效果吧。
任何時候我們都要善于進行分析，尤其在解決問題之前最重要的一步就是分析。
1、首先頁面開場的特效是由Css3動畫來完成的。所有我們一定要使用animation動畫屬性，并且配合@keyframes動畫規(guī)則來進行實現(xiàn)。
2、在動畫執(zhí)行過程當中，我們操作的css樣式分別為放大、顏色、旋轉(zhuǎn)。其中顏色包括背景顏色和字體顏色
3、打開后文字位置不會隨分辨率大小發(fā)生改變，那么我們需要用到flexbox彈性布局。
1、Css3的animation用法：
之前的時候我們應用簡寫的方式比較多，由于我們需要同時設置多個動畫，所以這里需要分開使用animation。一個屬性名后，可以寫多個動畫名或執(zhí)行時間，記得用逗號隔開。
2、Css3的transform用法：
Transform一共有4種變形狀態(tài)。
旋轉(zhuǎn)：transform:rotate(Ndeg)
放大：transform:scale();
傾斜：transform:skew(Ndeg);
平移：transform:translate(px);
那這里我們應用前兩個就可以了。
3、一種優(yōu)雅的布局方式 Flexbox彈性盒模型
將容器設置好display:flex;后，主軸居中對齊、交叉軸居中對齊即可。
1、首先我們要寫好HTML結(jié)構(gòu)，將標簽自帶的填充去掉，對HTML標簽進行normalize。
*{margin：0；padding：0；}
2、對main標簽進行設置。
設置動畫名稱、設置動畫的持續(xù)時間、設置”豪橫”兩字的擺放位置
3、三種動畫的@keyframes規(guī)則
@keyframes規(guī)則有兩種寫法，兩種方法都有自己的優(yōu)點。第一種更簡單，第二種更加細節(jié)。
1）第一種 from to的方式
2) 第二種 百分比 的方式
動畫scale：
動畫colors：
動畫rotate：
4、設置一下字號、字體
經(jīng)過編寫后，大家是不是覺得其實并沒有那么復雜呢？前端的入門門檻較低。可以很快的通過簡單的邏輯寫出漂亮的頁面。但是也希望大家更認真得對待知識，想寫出好看的效果首先我們應當有扎實的基本功，配合著豐富的想象力和執(zhí)行力，我們才能寫出更多更好看的特效。
助CSS所提供的動畫效果，旋轉(zhuǎn)效果除了能夠制作動畫及網(wǎng)頁頁面元素，如按鈕之外，還可以使用CSS實現(xiàn)精美的動態(tài)片頭的制作。本文主要介紹CSS與HTML實現(xiàn)精美的動畫片頭制作實例。
如何使用CSS實現(xiàn)精美片頭制作
本例設計使用煙霧粒子效果與動態(tài)文本結(jié)合，實現(xiàn)動態(tài)片頭效果，文字內(nèi)容隨著煙霧而動態(tài)生成、展示，案例最終效果要求描述如下：
動態(tài)片頭實現(xiàn)效果描述
本例設置實現(xiàn)動態(tài)效果描述如上圖所示，主要內(nèi)容包括三部分，實現(xiàn)效果要求如下：
1、動態(tài)煙霧效果
動態(tài)煙霧部分主要借助視頻資源MP4實現(xiàn)，通過在頁面指定位置定義video視頻標簽，設置src資源屬性，自動播放煙霧部分視頻即可。
2、主標題部分
主標題部分主要通過使用animation屬性進行動畫設置，使用opacity屬性設置其透明度，分別從完全透明到100%不透明，使用單獨HTML元素表示每一個字符，在每個字符進行展示時，設置動畫延遲時間animation-delay屬性，最終展現(xiàn)與煙霧一致的顯示效果。
3、副標題部分
副標題部分主要設計效果為隨時間字體的透明度與模糊程度發(fā)生變化，并且使用元素投影效果，隨著時間投影角度發(fā)生動態(tài)變化。
1、基本頁面布局
本例頁面元素主要包括video視頻標記、section章節(jié)標記、h標題標記、span標記與i標記。按照最終展示效果進行頁面的基本布局，頁面布局實現(xiàn)代碼描述如下：
基本頁面布局HTML代碼
2、主標題CSS及動畫設置
在完成基本頁面布局之后可以進一步編寫主標題部分，并對主標題部分CSS與動畫進行設置。主要涉及到屬性包括：
借助以上基本CSS屬性設置，我們可以對主標題部分動畫效果進行編碼與實現(xiàn)，部分實現(xiàn)代碼如下所示：
h span css定義
使用span表示主標題字符延時設置
3、子標題CSS及動畫實現(xiàn)
按照設計要求，子標題主要效果包括透明度、模糊度改變、投影及投影角度變化等。主要涉及CSS屬性包括以下：
借助以上CSS效果屬性與animation動畫屬性設置，最終可以實現(xiàn)子標題設計提出的效果要求部分核心代碼說明如下：
子標題實現(xiàn)效果代碼
子標題部分實現(xiàn)代碼如上圖所示，其中drop-shadow用于實現(xiàn)投影功能，其中第一個參數(shù)與第二個參數(shù)可用于實現(xiàn)角度設置，第三個參數(shù)用于設置模糊程度，最后一個參數(shù)用于描述陰影顏色。以上給出了CSS動態(tài)片頭效果實現(xiàn)的基本思路與部分核心實現(xiàn)代碼。不足之處歡迎大家留言探討。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區(qū)回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！
?在我們顯示的頁面中動畫對于我們來說雖然不是必須的，但是必要的一些動畫效果能夠提高用戶的體驗，幫助用戶更好的理解頁面中的功能。所以本文就來給大伙介紹下動畫的基礎內(nèi)容。
??我們先來實現(xiàn)一個不帶動畫效果的顯示和隱藏的功能。
案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="開關" @click="flag=!flag">
<h3 v-if="flag">這是一個h3</h3>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
效果雖然實現(xiàn)了，但是效果并不是太好。
??Vue 在插入、更新或者移除 DOM 時,我們可以在 CSS 過渡和動畫中自動應用 class，
在這里插入圖片描述
過渡類 | 說明 |
v-enter | 這是一個時間點,是進入之前， |
v-enter-active | 入場動畫的時間段 |
v-enter-to | 入場結(jié)束的時間點 |
v-leave | 離場動畫開始的時間點 |
v-leave-active | 離場動畫的時間段 |
v-leave-to | 這是一個時間點,是動畫離開之后， |
1.要使用過渡動畫效果的元素 必須被 transition標簽包裹
在這里插入圖片描述
2.定義對應的樣式
在這里插入圖片描述
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
/**opacity 透明度 transform ：https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX( 150px )
}
.v-enter-active,
.v-leave-active {
transition: all 1s ease
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="開關" @click="flag=!flag">
<transition>
<h3 v-if="flag">這是一個h3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
??對于沒有定義的transition名稱的類名默認前綴是 v-,但如果我們想要自定義前綴，那么可以給transition設置個那么屬性，比如：
在這里插入圖片描述
在這里插入圖片描述
效果還是一樣的。
??通過案例中我們需要自定動畫效果，這個會顯得有點麻煩，這時我們可以使用別人已經(jīng)定義的動畫效果，比如Animate.css來實現(xiàn)，https://daneden.github.io/animate.css/ 官網(wǎng)效果
在這里插入圖片描述
是不是提供的效果蠻多的呀，我們就來看看具體怎么用吧。
在這里插入圖片描述
可以自行在官網(wǎng)下載 在transition中添加對應的樣式
在這里插入圖片描述
https://github.com/daneden/animate.css 具體的樣式類可以在此頁面選擇
在這里插入圖片描述
注意：duration="毫秒值" 來統(tǒng)一設置 入場 和 離場 時候的動畫時長
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/animate.css">
</head>
<body>
<div id="app">
<input type="button" value="開關" @click="flag=!flag">
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{ enter: 200, leave: 400 }">
<h3 v-if="flag" class="animated">這是一個H3</h3>
</transition>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
flag: false
},
methods: {
}
})
</script>
</body>
</html>
效果
在這里插入圖片描述
演示效果不是太理想，工具原因，感興趣的小伙伴可自行運行哦。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
