整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在CSS3中新增了很多的新特性，其中使用頻率比較高的應(yīng)該是動畫效果了，它可以幫助我們實(shí)現(xiàn)以前使用Javascript才能實(shí)現(xiàn)的效果，極大的提高網(wǎng)頁的性能。今天這篇文章我們就來一起看一個(gè)使用CSS3新特性完成的翻書效果吧。
本文的源碼已經(jīng)放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來看看實(shí)際的運(yùn)行效果，動態(tài)圖如下所示。
效果圖
在看到上述的效果圖后，我們來進(jìn)行分析，這個(gè)過程是如何實(shí)現(xiàn)的。
這個(gè)頁面我們通過一個(gè)ul包含三個(gè)li來實(shí)現(xiàn)，每個(gè)li都給一個(gè)固定的寬度和高度。
第一個(gè)li在頁面上靜止不動。
第二個(gè)li添加動畫效果，使其直接繞Y軸翻轉(zhuǎn)360度。
第三個(gè)li添加動畫效果，但是翻轉(zhuǎn)周期是在25%的時(shí)候開始，因此會有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個(gè)過程，那就是給外層的ul元素添加perspective屬性，這個(gè)屬性是決定這個(gè)動畫能不能實(shí)現(xiàn)的主要的因素。
perspective是CSS3中新增的屬性，表示的是設(shè)置某個(gè)元素被查看的視角，用于實(shí)現(xiàn)3D效果。
需要注意的是當(dāng)某個(gè)元素設(shè)置了perspective屬性時(shí)，其子元素會獲得透視效果，而不是這個(gè)元素本身。
我們來看一個(gè)簡單的例子，有一個(gè)section父元素和一個(gè)div子元素，讓div元素旋轉(zhuǎn)45度，html元素如下。
html元素
其對應(yīng)的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設(shè)定600px時(shí)，得到的效果圖如下。
效果圖
通過以上兩幅圖的對比我們發(fā)現(xiàn)，兩幅圖在Y軸的視角上發(fā)生了變化。
接下來，我們來具體看看這個(gè)翻書效果的代碼實(shí)現(xiàn)。
通過之前的分析，我們知道這個(gè)效果是通過ul與li來實(shí)現(xiàn)的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個(gè)li添加動畫。
第二個(gè)li的css屬性
最后是給第三個(gè)li添加動畫。
第三個(gè)li的css屬性
注意到上面的代碼中有個(gè)25%和100%的設(shè)置，這個(gè)和第二個(gè)li不同，所以會有一種翻轉(zhuǎn)書頁快慢的差異感。
如果按照上述代碼來做，即可實(shí)現(xiàn)文章開始的翻書動畫效果。
今天這篇文章主要是通過CSS3新增的屬性實(shí)現(xiàn)了一個(gè)翻書動畫效果，大家學(xué)會了嗎？
在CSS3中新增了很多的新特性，其中使用頻率比較高的應(yīng)該是動畫效果了，它可以幫助我們實(shí)現(xiàn)以前使用Javascript才能實(shí)現(xiàn)的效果，極大的提高網(wǎng)頁的性能。今天這篇文章我們就來一起看一個(gè)使用CSS3新特性完成的翻書效果吧。
本文的源碼已經(jīng)放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來看看實(shí)際的運(yùn)行效果，動態(tài)圖如下所示。
效果圖
在看到上述的效果圖后，我們來進(jìn)行分析，這個(gè)過程是如何實(shí)現(xiàn)的。
這個(gè)頁面我們通過一個(gè)ul包含三個(gè)li來實(shí)現(xiàn)，每個(gè)li都給一個(gè)固定的寬度和高度。
第一個(gè)li在頁面上靜止不動。
第二個(gè)li添加動畫效果，使其直接繞Y軸翻轉(zhuǎn)360度。
第三個(gè)li添加動畫效果，但是翻轉(zhuǎn)周期是在25%的時(shí)候開始，因此會有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個(gè)過程，那就是給外層的ul元素添加perspective屬性，這個(gè)屬性是決定這個(gè)動畫能不能實(shí)現(xiàn)的主要的因素。
perspective是CSS3中新增的屬性，表示的是設(shè)置某個(gè)元素被查看的視角，用于實(shí)現(xiàn)3D效果。
需要注意的是當(dāng)某個(gè)元素設(shè)置了perspective屬性時(shí)，其子元素會獲得透視效果，而不是這個(gè)元素本身。
我們來看一個(gè)簡單的例子，有一個(gè)section父元素和一個(gè)div子元素，讓div元素旋轉(zhuǎn)45度，html元素如下。
html元素
其對應(yīng)的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設(shè)定600px時(shí)，得到的效果圖如下。
效果圖
通過以上兩幅圖的對比我們發(fā)現(xiàn)，兩幅圖在Y軸的視角上發(fā)生了變化。
接下來，我們來具體看看這個(gè)翻書效果的代碼實(shí)現(xiàn)。
通過之前的分析，我們知道這個(gè)效果是通過ul與li來實(shí)現(xiàn)的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個(gè)li添加動畫。
第二個(gè)li的css屬性
最后是給第三個(gè)li添加動畫。
第三個(gè)li的css屬性
注意到上面的代碼中有個(gè)25%和100%的設(shè)置，這個(gè)和第二個(gè)li不同，所以會有一種翻轉(zhuǎn)書頁快慢的差異感。
如果按照上述代碼來做，即可實(shí)現(xiàn)文章開始的翻書動畫效果。
今天這篇文章主要是通過CSS3新增的屬性實(shí)現(xiàn)了一個(gè)翻書動畫效果，大家學(xué)會了嗎？
SS3中包含幾個(gè)新的文本特征。
在我這里您將了解以下文本屬性：
text-shadow
box-shadow
text-overflow
word-wrap
word-break
瀏覽器支持
| 屬性 | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.04.0 -webkit- | 9.0 | 4.03.5 -moz- | 5.13.1 -webkit- | 10.5 |
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.09.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 的文本陰影
CSS3 中，text-shadow屬性適用于文本陰影。
您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：
實(shí)例
給標(biāo)題添加陰影:
h1{text-shadow:5px5px5px#FF0000;}
CSS3 box-shadow屬性
CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影
實(shí)例
div{box-shadow:10px10px;}
接下來給陰影添加顏色
實(shí)例
div{box-shadow:10px10pxgrey;}
接下來給陰影添加一個(gè)模糊效果
實(shí)例
div{box-shadow:10px10px5pxgrey;}
嘗試一下 ?
你也可以在 ::before 和 ::after 兩個(gè)偽元素中添加陰影效果
實(shí)例
#boxshadow{position:relative; box-shadow:1px2px4pxrgba(0, 0, 0, .5); padding:10px; background:white;}#boxshadowimg{width:100%; border:1pxsolid#8a4419; border-style:inset;}#boxshadow::after{content: ''; position:absolute; z-index: -1; /* hide shadow behind image */box-shadow:015px20pxrgba(0, 0, 0, 0.3); width:70%; left:15%; /* one half of the remaining 30% */height:100px; bottom:0;}
陰影的一個(gè)使用特例是卡片效果
實(shí)例
div.card{width:250px; box-shadow:04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19); text-align:center;}
文字卡片 ? 圖片卡片 ?
CSS3 Text Overflow屬性
CSS3文本溢出屬性指定應(yīng)向用戶如何顯示溢出內(nèi)容
實(shí)例
p.test1{white-space:nowrap; width:200px; border:1pxsolid#000000; overflow:hidden; text-overflow:clip; }p.test2{white-space:nowrap; width:200px; border:1pxsolid#000000; overflow:hidden; text-overflow:ellipsis; }
嘗試一下 ?
CSS3的換行
如果某個(gè)單詞太長，不適合在一個(gè)區(qū)域內(nèi)，它擴(kuò)展到外面：
CSS3中，自動換行屬性允許您強(qiáng)制文本換行 - 即使這意味著分裂它中間的一個(gè)字：
CSS代碼如下：
實(shí)例
允許長文本換行:
p{word-wrap:break-word;}
嘗試一下 ?
CSS3 單詞拆分換行
CSS3 單詞拆分換行屬性指定換行規(guī)則：
CSS代碼如下：
實(shí)例
p.test1{word-break:keep-all;}p.test2{word-break:break-all;}
嘗試一下 ?
新文本屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| hanging-punctuation | 規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。 | 3 |
| punctuation-trim | 規(guī)定是否對標(biāo)點(diǎn)字符進(jìn)行修剪。 | 3 |
| text-align-last | 設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。 | 3 |
| text-justify | 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對齊方法。 | 3 |
| text-outline | 規(guī)定文本的輪廓。 | 3 |
| text-overflow | 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規(guī)定文本的換行規(guī)則。 | 3 |
| word-break | 規(guī)定非中日韓文本的換行規(guī)則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
