Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
在CSS3中新增了很多的新特性,其中使用頻率比較高的應(yīng)該是動畫效果了,它可以幫助我們實現(xiàn)以前使用Javascript才能實現(xiàn)的效果,極大的提高網(wǎng)頁的性能。今天這篇文章我們就來一起看一個使用CSS3新特性完成的翻書效果吧。
本文的源碼已經(jīng)放在了Github上,感興趣的可以clone到本地試試,地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來看看實際的運行效果,動態(tài)圖如下所示。
效果圖
在看到上述的效果圖后,我們來進行分析,這個過程是如何實現(xiàn)的。
這個頁面我們通過一個ul包含三個li來實現(xiàn),每個li都給一個固定的寬度和高度。
第一個li在頁面上靜止不動。
第二個li添加動畫效果,使其直接繞Y軸翻轉(zhuǎn)360度。
第三個li添加動畫效果,但是翻轉(zhuǎn)周期是在25%的時候開始,因此會有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個過程,那就是給外層的ul元素添加perspective屬性,這個屬性是決定這個動畫能不能實現(xiàn)的主要的因素。
perspective是CSS3中新增的屬性,表示的是設(shè)置某個元素被查看的視角,用于實現(xiàn)3D效果。
需要注意的是當(dāng)某個元素設(shè)置了perspective屬性時,其子元素會獲得透視效果,而不是這個元素本身。
我們來看一個簡單的例子,有一個section父元素和一個div子元素,讓div元素旋轉(zhuǎn)45度,html元素如下。
html元素
其對應(yīng)的CSS屬性如下。
CSS屬性
在section元素上,如果不使用perspective的情況下,得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性,并設(shè)定600px時,得到的效果圖如下。
效果圖
通過以上兩幅圖的對比我們發(fā)現(xiàn),兩幅圖在Y軸的視角上發(fā)生了變化。
接下來,我們來具體看看這個翻書效果的代碼實現(xiàn)。
通過之前的分析,我們知道這個效果是通過ul與li來實現(xiàn)的,html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性,記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個li添加動畫。
第二個li的css屬性
最后是給第三個li添加動畫。
第三個li的css屬性
注意到上面的代碼中有個25%和100%的設(shè)置,這個和第二個li不同,所以會有一種翻轉(zhuǎn)書頁快慢的差異感。
如果按照上述代碼來做,即可實現(xiàn)文章開始的翻書動畫效果。
今天這篇文章主要是通過CSS3新增的屬性實現(xiàn)了一個翻書動畫效果,大家學(xué)會了嗎?
tml頁面設(shè)置動態(tài)金額滾動效果!
一開始加載頁面,數(shù)字都會過渡滾動到具體數(shù)字上!
代碼:
html:
css:
js:
天我們一起來看幾個有趣的css動畫效果,用到的CSS3的知識點
線條圍繞著容器轉(zhuǎn)動
運行效果
首先,我們看下運行出來的效果圖
實現(xiàn)方式
這個效果并不是直接使用animation來實現(xiàn)的,而是通過clip屬性來實現(xiàn)的。外邊的藍色運動的線條實際為一個完整的div,只是通過clip屬性裁剪后只剩下上下左右之中的一邊
clip屬性依據(jù)上-右-下-左的順序,以左上角(0, 0)為標(biāo)準(zhǔn)點進行裁剪,如果傳入的參數(shù)為auto,則表示不裁剪
實例代碼
html部分的代碼
css部分的代碼
CSS部分代碼
CSS實現(xiàn)餅圖
在我們畫餅圖的時候會想到使用Canvas或者SVG,使用CSS我們同樣可以模擬出餅圖的形狀
運行效果
實現(xiàn)方式
首先要使用border-radius屬性將div設(shè)置為圓角
使用animation-delay屬性控制動畫效果
實例代碼
html部分代碼
css部分代碼
總結(jié)
今天這兩個有趣的CSS動畫效果,你學(xué)會了嗎?
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。