編輯推薦:

《HTML5+CSS3炫酷應(yīng)用實(shí)例集錦》以問題描述+解決方案+真實(shí)源碼+效果截圖的模式，采用HTML5、CSS3、jQuery等技術(shù)，例舉了六百余個(gè)實(shí)用性極強(qiáng)的Web前端開發(fā)案例，所見即所得、所學(xué)即所用，快速成為前端設(shè)計(jì)高手。

內(nèi)容簡介:

《HTML5+CSS3炫酷應(yīng)用實(shí)例集錦》采用問題描述+解決方案的模式，以HTML5、CSS3、jQuery、jQuery UI、SVG等新技術(shù)為核心，列舉了600多個(gè)實(shí)用性極強(qiáng)的Web前端開發(fā)技術(shù)，旨在幫助廣大讀者快速解決實(shí)際開發(fā)過程中面臨的諸多問題，從而提高項(xiàng)目的開發(fā)效率，拓展應(yīng)用領(lǐng)域。全書內(nèi)容分為文字、圖像、動(dòng)畫、視頻、元素、布局、選擇器、存儲、其他9部分，以所見即所得、所學(xué)即所用的速成思維展示了過渡動(dòng)畫、關(guān)鍵幀動(dòng)畫、濾鏡、選擇器、計(jì)數(shù)器、偽元素、盒子、沙箱、畫布等Web前端技術(shù)的具體應(yīng)用，揭秘了百度地圖定位、響應(yīng)式頁面布局、散列圖片布局、瀑布流圖片布局、旋轉(zhuǎn)圓弧滑出菜單、批量插入與自動(dòng)編號、盒子模型、圖像與文字特效、多餅圖繪制等諸多炫酷創(chuàng)意實(shí)例的實(shí)現(xiàn)過程。

為了突出實(shí)用性和簡潔性，本書在演示或描述這些實(shí)例時(shí)力求針對性地解決問題，并且所有實(shí)例均配有插圖。本書適合作為Web前端開發(fā)人員的案頭參考書，無論是對于編程初學(xué)者還是編程高手，本書都極具參考和收藏價(jià)值。

目錄:第1部分文字
001在畫布上創(chuàng)建向上的3D拉影文字
002在畫布上創(chuàng)建向下的3D拉影文字
003在畫布上創(chuàng)建向左或向右的3D拉影文字
004在畫布上創(chuàng)建模糊陰影的文字
005在畫布上創(chuàng)建邊緣羽化的文字
006在畫布上創(chuàng)建空心線條的文字
007在畫布上繪制半透明陰影文字
008在畫布上繪制左右漸變的文字
009在畫布上繪制扁平或細(xì)長的文字
010在畫布上使用圖像填充文字線條
011在畫布上移動(dòng)鼠標(biāo)指針實(shí)現(xiàn)文字涂鴉
012將畫布上的文字、圖像等保存到本地
013使用SVG實(shí)現(xiàn)文字在圓弧上顯示
014使用SVG實(shí)現(xiàn)文字繞三角形顯示
015使用SVG實(shí)現(xiàn)文字沿曲線顯示
016使用SVG實(shí)現(xiàn)文字沿跑道線顯示
017在SVG中對線條進(jìn)行加粗或瘦身
018使用SVG描邊創(chuàng)建空心線條文字
019使用SVG描邊創(chuàng)建漸變空心文字
020使用SVG濾鏡創(chuàng)建擴(kuò)散陰影文字
021使用SVG濾鏡創(chuàng)建木雕和蝕刻文字
022使用SVG的動(dòng)畫變換實(shí)現(xiàn)文字旋轉(zhuǎn)
023在SVG中逐字旋轉(zhuǎn)一行的每個(gè)文字
024在SVG中壓扁單行文本的每個(gè)文字
025在SVG中實(shí)現(xiàn)單行文本的字間距不等
026在SVG中錯(cuò)落顯示單行文本的每個(gè)文字
027以陰影模糊效果顯示當(dāng)前選擇文本
028以霓虹燈發(fā)散效果顯示當(dāng)前選擇文本
029以多級輝光效果顯示當(dāng)前選擇文本
030以下沉凹坑效果顯示當(dāng)前選擇文本
031以雕刻凸出效果顯示當(dāng)前選擇文本
032以模糊發(fā)散效果顯示當(dāng)前選擇文本
033以模糊雕刻效果顯示當(dāng)前選擇文本
034以內(nèi)凹嵌入效果顯示當(dāng)前選擇文本
035以線條描邊效果顯示當(dāng)前選擇文本
036以浮雕鑲嵌效果顯示當(dāng)前選擇文本
037以漸變倒影效果顯示當(dāng)前選擇文本
038以透明陰影效果顯示當(dāng)前選擇文本
039設(shè)置文字邊框創(chuàng)建鏤空風(fēng)格的文字
040使用多級陰影創(chuàng)建3D效果的文字
041裁剪圓形并使文字環(huán)繞圓形邊緣顯示
042裁剪多邊形并使文字環(huán)繞其邊緣顯示
043通過組合屬性值實(shí)現(xiàn)加長陰影文字
044創(chuàng)建漸變背景繪制上下漸變的文字
045創(chuàng)建透明層繪制上下漸變的文字
046將圖片顏色和文本顏色混合疊加顯示
047使用自定義字體顯示手寫文字
048設(shè)置邊框線高仿字庫中的帶圈文字
049使用自定義字體模擬LED文字風(fēng)格
050在二維平面中旋轉(zhuǎn)單行的白色陰影文字
051以不同顏色顯示漢字的上、下兩部分
052以不同顏色顯示漢字的左、右兩部分
053模擬古詩的風(fēng)格從上到下顯示文本
054繪制不規(guī)則圖形實(shí)現(xiàn)不規(guī)則文字布局
055在段落文本的右上角放置文字環(huán)繞圖片
056在段落文本的左上角放置文字環(huán)繞圖片
057在段落文本的左下角放置文字環(huán)繞圖片
058對所有段落的第一個(gè)字設(shè)置加大、下沉效果
059僅對第一個(gè)段落的首字設(shè)置加大、下沉效果
060在段落的第一個(gè)字的外圍設(shè)置陰影效果
061在段落的第一行字的外圍設(shè)置陰影效果
第2部分圖像
062通過逐點(diǎn)處理像素實(shí)現(xiàn)圖像底片效果
063采用平均值法將圖像從彩色變?yōu)榛叶?
064使用拉普拉斯模板實(shí)現(xiàn)銳化處理圖像
065對彩色圖像進(jìn)行灰白浮雕的特效處理
066對彩色圖像進(jìn)行模糊化的特效處理
067使用隨機(jī)數(shù)對圖像進(jìn)行油畫特效處理
068使用隨機(jī)數(shù)對圖像進(jìn)行霧化特效處理
069選擇不同的組合模式疊加顯示兩幅圖像
070選擇不同的混合模式疊加顯示兩幅圖像
071在圖像中摳取某部分并對其進(jìn)行局部放大
072通過繪制五角星的形狀來裁剪圖像
073通過繪制圓餅圖的形狀來裁剪圖像
074采用均勻壓縮法創(chuàng)建橢圓并裁剪圖像
075通過繪制多個(gè)圓形實(shí)現(xiàn)太極圖案的繪制
076在自定義畫布上模擬刮刮獎(jiǎng)的刮獎(jiǎng)特效
077繪制局部圖像模擬水平或垂直展開圖像
078繪制局部圖像模擬向左、右兩端展開圖像
079繪制局部圖像模擬以百葉窗風(fēng)格展開圖像
080繪制局部圖像模擬向上、下兩端展開圖像
081對圖像進(jìn)行水平拉伸放大或垂直拉伸
082重新映射畫布并按照指定角度旋轉(zhuǎn)圖像
083對彩色圖像進(jìn)行水平鏡像的特效處理
084給圖像添加半透明放射圓形面罩特效
085設(shè)置填充樣式以平鋪的風(fēng)格顯示圖像
086將畫布的內(nèi)容保存為png格式的文件
087將畫布的內(nèi)容保存為jpeg格式的文件
088讀取并顯示沙箱系統(tǒng)中的圖像文件
089以二進(jìn)制形式讀取并顯示本地圖像文件
090從本地計(jì)算機(jī)中選擇圖像文件并全屏顯示
091將本地圖像文件或文本文件拖放到網(wǎng)頁中
092通過超鏈接的download屬性下載圖片
093定制個(gè)性化的虛線作為圖像的邊框線
094以拖動(dòng)圖像邊框線的方式實(shí)現(xiàn)圖像縮放
095以拖動(dòng)方式將圖像移動(dòng)到頁面中的任意位置
096以拖曳方式自動(dòng)調(diào)整九宮格中的圖像
097以固定長寬比例使用鼠標(biāo)拖曳縮放圖像
098在拖曳縮放圖像時(shí)限制拖曳的縮放范圍
099在一組圖像中獲取使用鼠標(biāo)選擇的圖像
100在移動(dòng)鼠標(biāo)時(shí)反色顯示鼠標(biāo)指針周圍的圖像
101在移動(dòng)鼠標(biāo)時(shí)模糊顯示鼠標(biāo)指針周圍的圖像
102使用自定義方法對圖像導(dǎo)圓角
103將普通圖像的4個(gè)直角改變?yōu)?個(gè)圓角
104對圓角圖像添加可定制模糊效果的陰影
105在圓角圖像外圍添加擴(kuò)散型的陰影
106在圓角圖像四周添加擴(kuò)散的內(nèi)置陰影
107在圖像的下端添加陰影凸出顯示圖像
108在圓角圖像四周添加擴(kuò)展的外置陰影
109通過對圖像進(jìn)行圓角實(shí)現(xiàn)裁剪橢圓圖像
110設(shè)置borderimage屬性實(shí)現(xiàn)重復(fù)邊框圖案
111旋轉(zhuǎn)多個(gè)圖像模擬照片的不規(guī)則排列
112通過扭曲和旋轉(zhuǎn)實(shí)現(xiàn)紙張的曲線投影
113通過旋轉(zhuǎn)和圓角創(chuàng)建異形風(fēng)格的頭像
114以水平或垂直翻轉(zhuǎn)的方式顯示圖像
115使用旋轉(zhuǎn)等方法創(chuàng)建心形風(fēng)格的圖形
116使用旋轉(zhuǎn)等方法創(chuàng)建無窮大符號
117根據(jù)圖形裁剪絕對定位元素的局部區(qū)域
118將絕對定位元素的區(qū)域裁剪成六邊形
119將絕對定位元素的區(qū)域裁剪成五角星
120將絕對定位元素的區(qū)域裁剪成橢圓
121將絕對定位元素的區(qū)域裁剪成圓形
122將絕對定位元素的區(qū)域裁剪成三角形
123將絕對定位元素裁剪成內(nèi)投影圖形
124將絕對定位元素裁剪成手柄式圖形
125根據(jù)指定的位置和大小截取圖片內(nèi)容
126通過裁剪方式獲取大圖像的局部內(nèi)容
127使用遮罩實(shí)現(xiàn)以不規(guī)則形狀裁剪圖像
128使用遮罩實(shí)現(xiàn)以png圖像形狀裁剪圖像
129以不同位置為原點(diǎn)放大或縮小圖像
130通過上下按動(dòng)鼠標(biāo)滾輪實(shí)現(xiàn)圖像縮放
131對圖像局部區(qū)域進(jìn)行毛玻璃狀的模糊
132對圖像和顏色以差值混合模式生成特效
133綜合兩種濾鏡實(shí)現(xiàn)以X光效果顯示圖像
134對元素下層的其他元素使用濾鏡特效
135使用alpha通道對元素實(shí)現(xiàn)半透明顯示
136通過設(shè)置HSLA實(shí)現(xiàn)元素的半透明顯示
137以多種混合模式處理圖像和文字顏色
138使用對比度和模糊濾鏡實(shí)現(xiàn)相互粘滯
139使用濾鏡對不規(guī)則圖像輪廓添加陰影
140使用skew()方法模擬3D風(fēng)格的陰影
141在圓角圖像下方添加漸變的倒影圖像
142通過創(chuàng)建多層內(nèi)置陰影高仿打靶圖案
143通過旋轉(zhuǎn)和平移陰影實(shí)現(xiàn)紙張的卷角、翹邊
144以多重陰影創(chuàng)建Firefox瀏覽器的logo標(biāo)
145通過選擇器創(chuàng)建Sogou瀏覽器的logo
146通過漸變創(chuàng)建Safari瀏覽器的logo
147通過漸變和陰影創(chuàng)建IE瀏覽器的logo
148以橢圓疊加方式創(chuàng)建Opera瀏覽器的logo
149通過漸變創(chuàng)建Chrome瀏覽器的logo
150通過徑向漸變和線性漸變創(chuàng)建穿線紐扣
151通過線性漸變創(chuàng)建充電狀態(tài)的電池圖案
152通過徑向漸變實(shí)現(xiàn)郵票邊緣的鋸齒風(fēng)格
153通過多級徑向漸變創(chuàng)建美國隊(duì)長的盾牌圖案
154通過切分邊框線所得的三角形創(chuàng)建五角星
155通過圖形組合實(shí)現(xiàn)絲帶纏繞展板的特效
156在圖像右上角創(chuàng)建傾斜45°的梯形標(biāo)簽
157增加和移除圖像左上角的自定義標(biāo)簽
158以6面構(gòu)建立方體并進(jìn)行3D視覺旋轉(zhuǎn)
159改變透明度模擬飛碟在星空中穿梭的效果
160根據(jù)鼠標(biāo)指針的軌跡確定如何旋轉(zhuǎn)和平移圖像
161使用負(fù)數(shù)參數(shù)獲取圖像的水平和垂直鏡像