隨著網(wǎng)絡(luò)技術(shù)的不斷前進(jìn)，很多新技術(shù)都在不斷的運用到網(wǎng)站中來，如何讓你的網(wǎng)站專題運轉(zhuǎn)起來呢？下面李工憑著自己的工作經(jīng)驗，向大家介紹兩種簡單實用的動態(tài)運轉(zhuǎn)方式，希望對大家有用：

拿到頁面設(shè)計稿后，起初打算從龍星的眼睛、嚕嚕、槍炮武器上進(jìn)行一些效果實現(xiàn)，最后為了突出活動抽獎，決定增加抽獎按鈕的光效以及獎品的呼吸效果。最終頁面呈現(xiàn)包括五個效果點：龍星眼睛的眨動、嚕嚕的飄動、抽獎按鈕的光效、獎品的hover呼吸燈效果以及槍炮武器的發(fā)光效果。

思路：首先設(shè)置初始屬性，背景Y軸位置為0，將背景遮住眼睛，最終屬性則是將背景位置移動到-3000px的位置，通過背景在4s內(nèi)沿Y軸勻速運動3000px的過程實現(xiàn)了眼睛眨動的效果。嚕嚕的飄動以及抽獎按鈕的發(fā)光效果與眼睛眨動效果是同樣的原理。
效果代碼如下：

思路：初始屬性設(shè)置背景透明度為0.6，最終屬性設(shè)置背景透明度為1，通過背景透明度的平滑變化，形成一個發(fā)光的呼吸效果。
效果代碼如下：

實現(xiàn)這樣簡單的動畫效果，需要運用到CSS3的哪些屬性呢？

CSS3有3個動畫屬性：
1、變形transform
transform字面上就是變形，改變的意思。在CSS3中，transform主要包括了旋轉(zhuǎn)rotate、縮放scale、移動translate、扭曲skew以及矩陣變形matrix。

動態(tài)運轉(zhuǎn)的作用很多，這需要網(wǎng)站設(shè)計師們自己用心去研究！

當(dāng)前名稱：讓你的網(wǎng)站專題運轉(zhuǎn)起來
分享網(wǎng)址：http://m.2m8n56k.cn/news/159616.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站收錄、商城網(wǎng)站、網(wǎng)站排名、企業(yè)網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)