新書推薦：
《
抗焦虑饮食（赠实践手册）
》
售價：NT$
498.0
《
生活不是掷骰子：理性决策的贝叶斯思维
》
售價：NT$
386.0
《
万有引力书系·基辅罗斯：东斯拉夫文明的起源
》
售價：NT$
661.0
《
康熙的红票：全球化中的清朝
》
售價：NT$
437.0
《
PyTorch语音识别实战
》
售價：NT$
386.0
《
多卖三倍
》
售價：NT$
252.0
《
哲学思维：清晰思考的12条关键原则
》
售價：NT$
386.0
《
海盗之书
》
售價：NT$
381.0
|
| 編輯推薦： |
|
《HTML5 CSS3炫酷应用实例集锦》以问题描述 解决方案 真实源码 效果截图的模式，采用HTML5、CSS3、jQuery等技术，例举了六百余个实用性极强的Web前端开发案例，所见即所得、所学即所用，快速成为前端设计高手。
|
| 內容簡介： |
《HTML5 CSS3炫酷应用实例集锦》采用问题描述 解决方案的模式，以HTML5、CSS3、jQuery、jQuery UI、SVG等新技术为核心，列举了600多个实用性极强的Web前端开发技术，旨在帮助广大读者快速解决实际开发过程中面临的诸多问题，从而提高项目的开发效率，拓展应用领域。全书内容分为文字、图像、动画、视频、元素、布局、选择器、存储、其他9部分，以所见即所得、所学即所用的速成思维展示了过渡动画、关键帧动画、滤镜、选择器、计数器、伪元素、盒子、沙箱、画布等Web前端技术的具体应用，揭秘了百度地图定位、响应式页面布局、散列图片布局、瀑布流图片布局、旋转圆弧滑出菜单、批量插入与自动编号、盒子模型、图像与文字特效、多饼图绘制等诸多炫酷创意实例的实现过程。
为了突出实用性和简洁性，本书在演示或描述这些实例时力求针对性地解决问题，并且所有实例均配有插图。本书适合作为Web前端开发人员的案头参考书，无论是对于编程初学者还是编程高手，本书都极具参考和收藏价值。
|
| 目錄：
|
目录
第1部分文字
001在画布上创建向上的3D拉影文字
002在画布上创建向下的3D拉影文字
003在画布上创建向左或向右的3D拉影文字
004在画布上创建模糊阴影的文字
005在画布上创建边缘羽化的文字
006在画布上创建空心线条的文字
007在画布上绘制半透明阴影文字
008在画布上绘制左右渐变的文字
009在画布上绘制扁平或细长的文字
010在画布上使用图像填充文字线条
011在画布上移动鼠标指针实现文字涂鸦
012将画布上的文字、图像等保存到本地
013使用SVG实现文字在圆弧上显示
014使用SVG实现文字绕三角形显示
015使用SVG实现文字沿曲线显示
016使用SVG实现文字沿跑道线显示
017在SVG中对线条进行加粗或瘦身
018使用SVG描边创建空心线条文字
019使用SVG描边创建渐变空心文字
020使用SVG滤镜创建扩散阴影文字
021使用SVG滤镜创建木雕和蚀刻文字
022使用SVG的动画变换实现文字旋转
023在SVG中逐字旋转一行的每个文字
024在SVG中压扁单行文本的每个文字
025在SVG中实现单行文本的字间距不等
026在SVG中错落显示单行文本的每个文字
027以阴影模糊效果显示当前选择文本
028以霓虹灯发散效果显示当前选择文本
029以多级辉光效果显示当前选择文本
030以下沉凹坑效果显示当前选择文本
031以雕刻凸出效果显示当前选择文本
032以模糊发散效果显示当前选择文本
033以模糊雕刻效果显示当前选择文本
034以内凹嵌入效果显示当前选择文本
035以线条描边效果显示当前选择文本
036以浮雕镶嵌效果显示当前选择文本
037以渐变倒影效果显示当前选择文本
038以透明阴影效果显示当前选择文本
039设置文字边框创建镂空风格的文字
040使用多级阴影创建3D效果的文字
041裁剪圆形并使文字环绕圆形边缘显示
042裁剪多边形并使文字环绕其边缘显示
043通过组合属性值实现加长阴影文字
044创建渐变背景绘制上下渐变的文字
045创建透明层绘制上下渐变的文字
046将图片颜色和文本颜色混合叠加显示
047使用自定义字体显示手写文字
048设置边框线高仿字库中的带圈文字
049使用自定义字体模拟LED文字风格
050在二维平面中旋转单行的白色阴影文字
051以不同颜色显示汉字的上、下两部分
052以不同颜色显示汉字的左、右两部分
053模拟古诗的风格从上到下显示文本
054绘制不规则图形实现不规则文字布局
055在段落文本的右上角放置文字环绕图片
056在段落文本的左上角放置文字环绕图片
057在段落文本的左下角放置文字环绕图片
058对所有段落的第一个字设置加大、下沉效果
059仅对第一个段落的首字设置加大、下沉效果
060在段落的第一个字的外围设置阴影效果
061在段落的第一行字的外围设置阴影效果
第2部分图像
062通过逐点处理像素实现图像底片效果
063采用平均值法将图像从彩色变为灰度
064使用拉普拉斯模板实现锐化处理图像
065对彩色图像进行灰白浮雕的特效处理
066对彩色图像进行模糊化的特效处理
067使用随机数对图像进行油画特效处理
068使用随机数对图像进行雾化特效处理
069选择不同的组合模式叠加显示两幅图像
070选择不同的混合模式叠加显示两幅图像
071在图像中抠取某部分并对其进行局部放大
072通过绘制五角星的形状来裁剪图像
073通过绘制圆饼图的形状来裁剪图像
074采用均匀压缩法创建椭圆并裁剪图像
075通过绘制多个圆形实现太极图案的绘制
076在自定义画布上模拟刮刮奖的刮奖特效
077绘制局部图像模拟水平或垂直展开图像
078绘制局部图像模拟向左、右两端展开图像
079绘制局部图像模拟以百叶窗风格展开图像
080绘制局部图像模拟向上、下两端展开图像
081对图像进行水平拉伸放大或垂直拉伸
082重新映射画布并按照指定角度旋转图像
083对彩色图像进行水平镜像的特效处理
084给图像添加半透明放射圆形面罩特效
085设置填充样式以平铺的风格显示图像
086将画布的内容保存为png格式的文件
087将画布的内容保存为jpeg格式的文件
088读取并显示沙箱系统中的图像文件
089以二进制形式读取并显示本地图像文件
090从本地计算机中选择图像文件并全屏显示
091将本地图像文件或文本文件拖放到网页中
092通过超链接的download属性下载图片
093定制个性化的虚线作为图像的边框线
094以拖动图像边框线的方式实现图像缩放
095以拖动方式将图像移动到页面中的任意位置
096以拖曳方式自动调整九宫格中的图像
097以固定长宽比例使用鼠标拖曳缩放图像
098在拖曳缩放图像时限制拖曳的缩放范围
099在一组图像中获取使用鼠标选择的图像
100在移动鼠标时反色显示鼠标指针周围的图像
101在移动鼠标时模糊显示鼠标指针周围的图像
102使用自定义方法对图像导圆角
103将普通图像的4个直角改变为4个圆角
104对圆角图像添加可定制模糊效果的阴影
105在圆角图像外围添加扩散型的阴影
106在圆角图像四周添加扩散的内置阴影
107在图像的下端添加阴影凸出显示图像
108在圆角图像四周添加扩展的外置阴影
109通过对图像进行圆角实现裁剪椭圆图像
110设置borderimage属性实现重复边框图案
111旋转多个图像模拟照片的不规则排列
112通过扭曲和旋转实现纸张的曲线投影
113通过旋转和圆角创建异形风格的头像
114以水平或垂直翻转的方式显示图像
115使用旋转等方法创建心形风格的图形
116使用旋转等方法创建无穷大符号
117根据图形裁剪绝对定位元素的局部区域
118将绝对定位元素的区域裁剪成六边形
119将绝对定位元素的区域裁剪成五角星
120将绝对定位元素的区域裁剪成椭圆
121将绝对定位元素的区域裁剪成圆形
122将绝对定位元素的区域裁剪成三角形
123将绝对定位元素裁剪成内投影图形
124将绝对定位元素裁剪成手柄式图形
125根据指定的位置和大小截取图片内容
126通过裁剪方式获取大图像的局部内容
127使用遮罩实现以不规则形状裁剪图像
128使用遮罩实现以png图像形状裁剪图像
129以不同位置为原点放大或缩小图像
130通过上下按动鼠标滚轮实现图像缩放
131对图像局部区域进行毛玻璃状的模糊
132对图像和颜色以差值混合模式生成特效
133综合两种滤镜实现以X光效果显示图像
134对元素下层的其他元素使用滤镜特效
135使用alpha通道对元素实现半透明显示
136通过设置HSLA实现元素的半透明显示
137以多种混合模式处理图像和文字颜色
138使用对比度和模糊滤镜实现相互粘滞
139使用滤镜对不规则图像轮廓添加阴影
140使用skew方法模拟3D风格的阴影
141在圆角图像下方添加渐变的倒影图像
142通过创建多层内置阴影高仿打靶图案
143通过旋转和平移阴影实现纸张的卷角、翘边
144以多重阴影创建Firefox浏览器的logo标
145通过选择器创建Sogou浏览器的logo
146通过渐变创建Safari浏览器的logo
147通过渐变和阴影创建IE浏览器的logo
148以椭圆叠加方式创建Opera浏览器的logo
149通过渐变创建Chrome浏览器的logo
150通过径向渐变和线性渐变创建穿线纽扣
151通过线性渐变创建充电状态的电池图案
152通过径向渐变实现邮票边缘的锯齿风格
153通过多级径向渐变创建美国队长的盾牌图案
154通过切分边框线所得的三角形创建五角星
155通过图形组合实现丝带缠绕展板的特效
156在图像右上角创建倾斜45的梯形标签
157增加和移除图像左上角的自定义标签
158以6面构建立方体并进行3D视觉旋转
159改变透明度模拟飞碟在星空中穿梭的效果
160根据鼠标指针的轨迹确定如何旋转和平移图像
161使用负数参数获取图像的水平和垂直镜像
162以纯CSS使用两幅图像实现星级评分特效
163使用盒子阴影模拟半透明的遮罩层特效
164通过使用线性渐变实现纸张卷角效果
165使用模糊和灰度滤镜处理未选中图像
166在弹出提示框时模糊页面中的其他部分
167使用任意颜色设置png图像的轮廓颜色
168模拟不用的扑克牌始终插在最后的效果
169将元素的属性值作为图像的标题显示
170使用AlloyImage对图像进行柔化处理
171使用AlloyImage对图像进行黑白处理
172使用AlloyImage对图像进行素描处理
173使用AlloyImage给图像添加LOMO特效
174使用AlloyImage给图像添加暖秋特效
175使用AlloyImage给图像添加粗糙特效
176使用AlloyImage给图像添加紫色特效
177使用AlloyImage给图像添加复古特效
178使用AlloyImage给图像添加木雕特效
179使用AlloyImage给图像添加美肤特效
180使用AlloyImage给图像添加亮白特效
181在SVG中使用高斯模糊滤镜处理图像
182在SVG中使用矩阵滤镜旋转图像的色相
183在SVG中使用混合滤镜叠加两幅图像
184使用SVG滤镜线性校正图像中的像素
185使用SVG滤镜实现马赛克风格的图像
186使用SVG滤镜为不规则图像添加阴影
187使用SVG滤镜为图像添加翘边的阴影
188使用SVG的feOffset滤镜生成悬空阴影
189使用SVG滤镜对图像进行暗化和亮化
190使用SVG滤镜对图像进行轻微模糊处理
191使用SVG滤镜对图像进行深度模糊处理
192使用SVG滤镜对图像进行加粗锐化处理
193使用SVG滤镜对图像进行加亮锐化处理
194使用SVG滤镜对图像进行边缘化处理
195使用SVG滤镜对图像进行浮雕特效处理
196使用SVG滤镜对图像进行木刻特效处理
197使用SVG滤镜为图像添加波纹扩散特效
198使用SVG滤镜为图像添加波纹起伏特效
199使用SVG的放射渐变创建3D风格的球体
200使用SVG滤镜对图像进行离散特效处理
201使用SVG滤镜以蓝光或红光处理图像
202使用SVG滤镜根据指定颜色消除像素
203使用SVG滤镜Gamma校正图像的像素
204使用SVG滤镜以半个太极图裁剪图像
205使用SVG滤镜将图像裁剪成桃心图案
206使用SVG路径将图像裁剪成任意形状
207在SVG中通过路径绘制多个扇形饼图
208使用SVG滤镜实现仅显示图像的轮廓边缘
209使用SVG滤镜加粗或细化图形的轮廓
210使用SVG的feTile滤镜对图像进行平铺
211在SVG滤镜中使用不同的光源照射图像
212在SVG中合并使用滤镜创建的多个图层
213使用SVG的feTurbulence滤镜创建图像
214在一个元素中设置线性渐变背景颜色
215在一个元素中叠加显示多个背景图像
216在一个元素中平铺显示多个背景图像
217在元素中同时设置背景图像和背景颜色
218在元素背景之上叠加渐变色的遮罩层
219为元素设置从中心向圆周放射渐变的背景
220为元素设置重复的、从中心放射渐变的背景
221以左上角为中心设置放射渐变背景
222以左下角为中心设置放射渐变背景
223为元素设置重复的线性渐变背景
224以角度方式设置重复的线性渐变背景
225使用线性渐变方法创建波纹带状背景
226使用线性渐变方法创建箭头风格背景
227以滤色模式显示渐变背景和图像背景
228通过重复线性渐变实现信纸风格背景
229使用多个径向渐变实现太极图案背景
230创建渐变背景实现带线条风格的稿纸
231使用线性渐变实现背景隔行错色显示
232在元素的对角线上设置线性渐变的背景色
233透明显示在元素背景中叠加的两幅图像
234以叠加和滤色模式混合显示背景的两幅图像
235以差值和排除模式混合显示背景的两幅图像
236以强光和柔光模式混合显示背景的两幅图像
237以加深和减淡模式混合显示背景的两幅图像
238以增暗和增亮模式混合显示背景的两幅图像
239以色相和亮度模式混合显示背景的两幅图像
240以饱和度和颜色模式混合显示背景的两幅图像
241以正片叠底模式混合显示背景的两幅图像
242以多种混合模式混合显示背景的多幅图像
243使用镂空技术为png背景图标设置颜色
244以绝对定位实现背景模糊、前景清晰的特效
第3部分动画
245使用transition属性平滑地旋转图像
246使用transition属性移动和旋转图像
247使用transition属性实现图像的膨胀
248使用transition属性实现侧滑工具栏
249使用transition属性高仿toggle开关
250使用transition属性旋转菜单指示符
251使用transition属性高仿纸张卷边
252使用transition属性实现悬空阴影
253使用transition属性实现纸张卷拱
254使用transition属性实现图像由模糊变清晰
255使用transition属性实现动态拉伸文本框的边线
256使用transition属性实现从边线两端向中心靠拢
257使用transition属性实现动态滑出焦点按钮的背景
258使用transition属性高仿扑克牌正、反面的旋转
259使用transition和transform属性实现平行四边形风格菜单
260使用transition属性和translateY方法实现在图像上滑出简介层
261使用transition属性和translateY方法实现在图像上推出简介层
262使用transition和opacity属性实现淡入和淡出的切换效果
263使用transition属性和jQuery代码实现折叠和展开多幅图像
264使用transition属性和target选择器模拟类似手风琴的折叠特效
265使用transition属性实现图像由彩色变为黑白
266使用transition属性动态改变圆饼图的百分比
267使用transition属性拉伸和收缩文本的下画线
268使用transition属性实现扇形风格的多级菜单
269使用transition属性实现抽屉风格的滑出菜单
270使用transition属性模拟用鼠标操控旋转木马
271使用transition属性实现响应Metro风格的模块
272使用transition属性实现菜单栏的折叠和展开
273使用transition属性模仿光柱划过夜空的效果
274使用transition属性逐字旋转切换文本的状态
275使用transition属性放大显示当前菜单项
276使用transition属性显示或隐藏侧边栏菜单项
277使用transition属性凸出显示选项卡的当前标签
278使用关键帧动画定制移动和旋转的图像
279使用关键帧动画实现闪烁的阴影光圈
280使用关键帧动画实现以淡入效果显示图像
281使用关键帧动画实现以卷帘效果显示图像
282使用关键帧动画实现从左向右滑入图像
283使用关键帧动画高仿抽奖转盘的转动特效
284使用关键帧动画高仿弹簧的拉伸、压缩效果
285使用关键帧动画实现多个图像自动轮播
286使用关键帧动画实现圆环转圈更新特效
287使用关键帧动画实现淡入、淡出轮播特效
288使用关键帧动画实现文字水平滚动显示
289使用关键帧动画高仿小圆点的加载状态
290使用关键帧动画实现在单行中轮播文本
291使用关键帧动画高仿白云在天空中游走
292使用关键帧动画实现在按钮上扩散波纹
293使用关键帧动画高仿因信号干扰花屏的特效
294使用关键帧动画模拟理发店跑马灯特效
295使用关键帧动画高仿加载间隔转圈特效
296使用关键帧动画同时旋转多个3D汉字
297使用关键帧动画实现表格隔行闪烁显示
298使用关键帧动画实现文本框中的提示的闪烁显示
299使用关键帧动画来回水平扫描阴影文本
300使用关键帧动画动态拉伸超链接下画线
301使用关键帧动画实现打字式的输入效果
302使用关键帧动画高仿足球滚动效果
303使用关键帧动画实现逐帧播放特效
304使用关键帧动画高仿扑克出牌前的弹跳动作
305使用关键帧动画往返滑动自定义下画线
306使用关键帧动画实现白云和阴影的联动
307使用关键帧动画实现白云和文本的联动
308使用关键帧动画实现雨滴从白云中下落
309使用关键帧动画高仿风力发电机的桨叶转动的特效
310使用关键帧动画模拟彩虹和阴影的联动
311使用关键帧动画模拟夜空中闪烁的星星
312使用关键帧动画模拟夜空中下落的流星雨
313使用关键帧动画实现水波波纹扩散的效果
314使用关键帧动画模拟座椅在地板上滑动
315使用关键帧动画模拟内、外圆环转动特效
316使用关键帧动画实现带阴影渐变进度条
317使用关键帧动画实现当前按钮标题的闪烁显示
318使用关键帧动画实现圆环转圈加载的特效
319使用关键帧动画实现环绕矩形转动特效
320使用关键帧动画实现凸轮滑动闪烁特效
321使用关键帧动画模拟立方体的3D旋转特效
322使用关键帧动画模拟多个立方体的旋转
323使用关键帧动画模拟小圆点加载的状态
324使用关键帧动画实现以多色圆环模拟加载进度
325使用关键帧动画模拟足球射门的动作变化
326使用关键帧动画模拟雷达的动态扫描效果
327使用关键帧动画模拟霓虹灯文字的闪烁
328使用关键帧动画实现3D效果的走马灯文字
329使用关键帧动画模拟阴影跟随灯光移动
330使用关键帧动画模拟多层波浪波动的效果
331使用关键帧动画模拟生物在水中的摆动
332使用关键帧动画模拟碎片拼接图像特效
333使用关键帧动画模拟地球在太空中自转
334使用关键帧动画模拟文字弹跳滑入页面
335通过关键帧动画使字符串呈现波浪抖动
336使用requestAnimFrame（）方法动态绘制火苗
337使用requestAnimFrame（）方法动态绘制桃心
338通过矩阵变换绘制动态走动的时钟
339通过绘制圆弧模拟风车叶轮的转动特效
340通过旋转绘图对象模拟高速旋转的车轮
341通过定时器改变HSLA值模拟渐变的圆环
342使用蒙版高仿电波逐级扩散的动态特效
343以动画形式模拟订单提交前的等待状态
344以文本缩进形式模拟等待的变长省略号
345使用收缩、扩展的形式平滑切换两个场景
346以类似翻书的风格旋转切换两个场景
347创建渐变色文字的光影流动特效
348不间断水平滚动显示序列中的广告图片
349使用计时器实现电话在桌面上震动的特效
350使虚线边框线实现跑马灯滚动效果
351使用定时器高仿改变进程的图文进度条
352通过2D旋转方式模拟走动的时钟表盘
353在单行菜单中以下拉方式滑出焦点菜单
354在延迟指定时间后执行显示或隐藏元素
355使用gif格式的图像实现边框线跑马灯效果
356在页面中嵌入播放swf等格式的动画文件
357使用SVG矢量图形模拟水波特效文字
358在SVG中实现文字沿三角形的边线跑动
359在SVG中实现文字沿螺旋线跑动消失
360使用SVG的animateTransform旋转图像
361使用SVG的animate组合多种动画特效
362使用SVG的animateMotion模拟过山车
363使用SVG的animateMotion模拟老鼠逃跑
364为超链接提示框实现爆炸式的关闭风格
365以卷帘式风格关闭和显示超链接提示框
366以滑入、滑出效果显示和关闭超链接提示框
367以扩张的效果显示和关闭超链接提示框
368以淡入、淡出效果显示和关闭超链接提示框
369以膨胀的效果显示和关闭超链接提示框
370以闪烁的效果显示和关闭超链接提示框
371以缩放的效果显示和关闭超链接提示框
372以弹跳的效果显示和关闭超链接提示框
373以高亮的效果显示和关闭超链接提示框
374以震动的效果显示和关闭超链接提示框
375以抽屉滑动的效果显示和关闭超链接提示框
376在显示日期选择器时附加弹跳动画效果
第4部分视频
377通过拖动滑块方式改变视频的播放进度
378在播放视频、音频时同步显示关联字幕
379以一定的角度旋转正在播放的视频窗口
380在垂直方向上翻转正在播放的视频图像
381在水平方向上镜像正在播放的视频图像
382在垂直方向上压缩视频产生宽屏幕效果
383访问摄像头并单击截取视频中的图像
384使用article元素嵌入文件来播放视频
385在页面中播放mp4等格式的多媒体文件
386使用滤镜改变视频图像的颜色透明度
387通过滤镜使视频图像产生怀旧的风格
388通过色相旋转使视频图像显示重组色彩
389通过设置饱和度改变淡化视频图像的颜色
390反转颜色使视频图像产生底片的特效
391改变对比度突出显示视频图像的颜色
392改变明亮度提高视频图像的呈现颜色
393改变模糊度使视频图像呈现虚化特效
394改变灰度使视频图像呈现黑白效果
395全屏播放视频或退出全屏正常播放视频
第5部分元素
396以折叠或展开风格显示标题或者详细内容
397以分组形式显示下拉列表框中的选项
398为下拉列表框中的选项添加关联辅助信息
399使用png图像自定义下拉列表框的向下箭头
400模拟下拉列表框的风格创建下拉式菜单
401以拖曳方式将菜单项插入新的位置
402以拖曳方式增加和移除两个列表的选项
403禁止或允许拖曳选项插入空列表中
404以拖放风格实现在元素之间传递数据
405创建两个滑块控件从两端改变数值范围
406创建上限固定、下限可调节的范围滑块控件
407创建下限固定、上限可调节的范围滑块控件
408以拖动range滑块方式改变字体的大小
409创建图形和文字结合的进度条显示进程
410使用meter模拟progress的进度显示
411在进度条上显示进度完成的百分比值
412使用随机色设置不确定进度条的背景颜色
413通过设置按钮的阴影属性创建渐变色按钮
414通过设置按钮的阴影属性创建中心扩散按钮
415使用盒子阴影创建金属质感的立体按钮
416将默认的3D风格按钮重置为扁平化按钮
417使用radio单选按钮隐藏或者显示内容
418使用appearance属性将超链接显示为按钮
419在日期选择器中实现年份和周数的选择
420在日期选择器中实现年份和月数的选择
421在日期选择器中实现年、月、日信息的选择
422在日期选择器中显示年份下拉列表
423在日期选择器中显示月份下拉列表
424创建可显示和选择多月份的日期选择器
425自动校验在范围内设置的年、月、日信息
426自动校验用户设置的小时数和分钟数
427自定义在日期选择器中选择的日期格式
428在日期选择器中设置可选择的日期范围
429在日期选择器中禁止选择周末两天日期
430判断选择的日期在一年中处于第几周
431实现在颜色选择器中选择颜色设置背景
432使用radio单选按钮实现纯CSS选项卡
433创建标签在左侧排列的纵向风格选项卡
434创建在标签右侧包含关闭按钮的选项卡
435创建通过底部的标签进行导航的选项卡
436实现鼠标指针悬浮在选项卡标签上时切换对应内容
437以拖曳方式在选项卡中增加、移除选项
438使用方向键在表格的输入框间跳转
439使用固定算法等距分配表格的列宽
440使用省略号代替固定表格列宽的长字符
441在表格的标题及单元格上添加阴影效果
442使用JSON传递的天气数据自动填充表格
443以模态方式显示对话框并获取其返回值
444创建包含确认和取消按钮的模式对话框
445创建可自定义标题栏的关闭按钮的对话框
446为超链接创建自定义风格的工具提示框
447使用阴影滤镜创建带指示箭头的提示框
448通过图形拼接的方式创建气泡式提示框
449使用透明的线性渐变创建切角提示框
450使用透明的径向渐变创建内圆角提示框
451通过叠加的方式创建箭头风格的提示框
452使用attr方法将属性值传递给提示框
453通过可选数据列表在文本框中插入内容
454使用数据源实现文本框的自动完成功能
455为自动完成文本框的下拉列表框添加滚动条
456对自动完成文本框的下拉选项进行分类
457启用或禁用文本框的自动完成功能
458禁止用户在文本框中粘贴剪切板的内容
459允许或禁止对文本框中的单词进行拼写检查
460设置pattern属性规范文本框中数据的输入
461在文本框中设置灰色的输入提示信息
462在提交表单时自动检查无内容的文本框
463在提交表单时校验文本框中的电子邮箱
464在提交表单时校验文本框中的网址格式
465在提交表单时校验文本框中的数字范围
466在文本框获得焦点时显示发光的边框线
467通过autofocus属性设置当前文本框
468通过label的control属性访问文本框
469使段落文本实现类似文本框的编辑功能
470在单个段落中使用省略号代替超长文本
471在可滚动段落底部添加渐变透明遮罩层
472使用textarea的拖曳标志实现CSS交互
473获取在textarea中使用鼠标选择的文本
474通过禁止选择文本来实现禁止复制内容
475通过设置oncopy的返回值禁止复制内容
476允许或禁止超长的数字或者单词跨行显示
477设置元素中所有单词的首字母是否大写
478设置段落中的部分文字是否带下画线
479对段落中的部分文字添加自定义的下画线
480创建背景符号对文本自定义下画线
481使用自定义的波浪线设置文本的下画线
482通过backgroundimage创建下画线
483以红色波浪线代替显示超链接的下画线
484为指定的超链接同时设置下画线和删除线
485通过start自定义有序列表的开始编号
486通过reversed实现有序列表的倒序编号
487通过计数器对目录的章节进行自动编号
488通过计数器自动统计所选择复选框的数量
489在同级子元素前面插入自增的数字编号
490在同级子元素前面插入自增的字母编号
491在同级子元素前面插入自增的罗马数字
492在父子关系的结构中对子元素嵌套编号
493仿照图书目录对多级结构元素嵌套编号
494在字符串两边添加嵌套的对称文字符号
495使用图像替换无序列表的列表项标记
496在多个条目中获取使用鼠标选择的条目
497使用伪元素重置默认的颜色选择器按钮
498使用伪元素定制日期选择器的部分样式
499使用伪元素重置文件上传按钮的样式
500使用伪元素去掉数字选择器的上、下按钮
501使用伪元素重置range元素的滑块、滑槽
502使用伪元素重置progress元素的样式
503使用伪元素自定义滚动条的轨道等样式
504使用伪元素定制默认滚动条的显示样式
505使用伪元素定制密钥对生成器字段的样式
506使用伪元素自定义meter度量衡的样式
507使用伪元素重置placeholder占位符
508使用伪元素隐藏搜索框右侧的取消按钮
509使用伪元素使range滑槽呈现渐变色
510使用伪元素自定义渐变色风格的滚动条
511使用伪元素实现菱形滑块的range元素
512通过for属性自定义默认的复选框图标
513通过设置五星字符的颜色实现星级评分
514实现以不同的颜色代表不同的星级评分
515自定义光标模拟粉笔在黑板上涂鸦
516允许用户使用拖动方式重置元素的尺寸
517创建距离活动结束的剩余时间倒计时牌
第6部分布局
518动态重置盒布局中各列内容的顺序
519动态重置盒布局中各列内容的方向
520使单行文本在垂直方向上位于盒子的正中
521在图像盒子的上端、下端居中显示文本
522动态重置弹性盒中子元素的排列方式
523动态重置弹性盒中子元素的对齐方式
524设置弹性盒元素沿水平方向等距对齐
525设置弹性盒元素沿水平或垂直方向布局
526根据收缩因子分配弹性盒的子元素空间
527根据扩展因子分配弹性盒的子元素空间
528使用弹性盒控制文本始终显示在正中间
529指定子元素分配弹性盒的纵向剩余空间
530指定子元素分配弹性盒的横向剩余空间
531允许弹性盒的子元素具有自动换行功能
532纵向拉伸对齐弹性盒中的各个子元素
533根据比例分配弹性盒的子元素剩余空间
534保持子元素在水平方向上始终位于容器的正中
535通过objectposition属性控制子元素在容器中的位置
536在水平方向上居中显示容器中的子元素
537自定义子元素在父容器中的自适应模式
538使用calc实现元素与容器的同步变化
539使用columnrule属性设置列分隔样式
540保持子元素在水平和垂直方向上始终位于正中
541在垂直方向上居中显示在一行文本中插入的图像
542等间距排列一行中的各个图像元素
543调整多个元素在垂直方向上的间隔距离
544自定义子元素在水平方向上的排列方向
545允许或禁止与相邻同级元素的float关系
546使用多列布局实现元素内容的分多列显示
547自定义多列布局的列与列之间的分隔样式
548使用盒布局解决多列底部不能对齐的问题
549在自适应多列布局中决定是否开启新列
550在自适应多列布局中决定是否强制开启新列
551使用随机数模拟照片墙的多图散列布局
552使用随机数模拟瀑布流风格的多图布局
553通过调整列宽将横向文字变为纵向文字
第7部分选择器
554使用firstline选择器定制文本的首行样式
555使用firstletter选择器定制文本的首字样式
556使用before选择器在元素之前插入内容
557使用before选择器在页面顶端添加阴影
558使用before选择器创建图文并列的按钮
559使用after选择器创建箭头风格的提示框
560使用focus选择器设置焦点文本框的边框线
561使用selection选择器突出显示选中文本
562使用hover选择器定制选中元素的样式
563使用empty选择器定制元素内容空白时的样式
564使用not选择器自定义子结构元素的样式
565使用onlychild选择器定制唯一子元素
566使用firstchild选择器定制开始子元素
567使用lastchild选择器定制末尾子元素
568使用nthchild选择器定制指定序号元素
569使用nthlastchild选择器定制倒数元素
570使用target选择器定制目标元素的样式
571使用属性选择器筛选超链接并追加内容
572使用属性选择器筛选超链接并插入元素
573使用属性选择器筛选超链接并禁止插入
574使用属性选择器筛选数据实现列表过滤
575使用兄弟选择器定制同级指定元素的样式
576使用选择器定制元素的奇数子元素的样式
577使用选择器定制元素的偶数子元素的样式
578使用选择器定制元素的倍数子元素的样式
579使用选择器实现表格隔行错色显示
580使用选择器实现下拉列表框的选项隔行错色显示
581使用选择器定制超范围文本框的显示样式
582使用选择器实现内圆弧化的渐变曲线图形
583使用选择器绘制扇形样式的多级彩虹
584使用选择器将按钮拆分成左、右两部分
第8部分存储
585使用localStorage读取或保存本地数据
586使用localStorage修改和保存表格数据
587在本地保存文件时申请和查询磁盘配额
588在本地计算机中创建文件并读写文件内容
589将本地计算机中的多个文件复制到沙箱系统
590删除受浏览器保护的沙箱系统中的指定文件
591在本地沙箱文件系统中创建目录及其文件
592在沙箱系统中使用递归函数创建多级目录
593获取沙箱根目录下的子目录及其文件
594在沙箱文件系统中删除目录及其文件
595在沙箱系统中实现目录之间的文件复制
596在沙箱文件系统中重命名指定的文件
第9部分其他
597使用@media查询创建响应式页面布局
598使用@media查询创建响应式表格布局
599使用png图像重置默认的鼠标指针形状
600在全屏显示模式下锁定和解锁鼠标指针
601全屏显示页面或使页面退出全屏模式
602创建自定义右键菜单代替默认右键菜单
603通过上下文菜单返回值禁止使用右键菜单
604使用字符编码解决中文字符的对齐问题
605实现十六进制编码和中文字符的相互转换
606使用meta元信息实现页面的定时跳转与刷新
607实现单击网页的任意位置立即触发广告
608通过使用滤镜特效实现灰色主题的网页
609使用MutationObserver监视DOM变化
610允许或禁止背景跟随浏览器的滚动条滚动
611在百度地图中根据经度和纬度指示位置
612在关闭页面前弹出消息框提示用户确认
|
| 內容試閱：
|
前言
2014年10月28日，W3C的HTML工作组发布了HTML5的正式推荐标准； 2015年4月9日，W3C的CSS工作组发布了CSS基本用户接口模块CSS Basic User Interface Module Level 3，CSS3 UI的标准工作草案。实际上，HTML5和CSS3都是渐进的标准，HTML5的第一份正式草案于2008年1月22日公布，从此Web前端就出现了HTML5的多种新技术，并且许多主流浏览器相继跟进支持，呈现了HTML5和CSS3的炫酷功能。
W3C CEO Jeff Jaffe博士表示： HTML5将推动Web进入新的时代。不久以前，通过Web还只是看一些基础文档，而如今Web是一个极其丰富的平台，通过Web可以做很多事情。
CSSCascading Style Sheet，层叠样式表用于对页面的布局、字体、颜色、背景和其他效果的实现进行更加精确的控制。CSS3是CSS技术的升级版本，CSS3开发是朝着模块化方向发展的，这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。本书未根据HTML5、CSS3、SVG的技术类别进行篇章的划分，而是将它们融合在一起，按照实例功能进行篇章的划分。实际上，各种技术都是为了实现某一目标，你中有我，我中有你，难分难解。
本书采用问题描述 解决方案的模式，以HTML5、CSS3、jQuery、jQuery UI、SVG等新技术为核心，列举了600多个实用性极强的Web前端开发技术，旨在帮助广大读者快速解决实际开发过程中面临的诸多问题，从而提高项目的开发效率、拓展应用领域。全书内容分为文字、图像、动画、视频、元素、布局、选择器、存储、其他9部分，以所见即所得、所学即所用的速成思维展示了过渡动画、关键帧动画、滤镜、选择器、计数器、伪元素、盒子、沙箱、画布等Web前端技术的具体应用，揭秘了百度地图定位、响应式页面布局、散列图片布局、瀑布流图片布局、旋转圆弧滑出菜单、批量插入与自动编号、盒子模型、图像与文字特效、多饼图绘制等诸多炫酷创意实例的实现过程。
本书实例在Windows 10操作系统下使用IntelliJ IDEA 14.0.2开发工具编写，测试浏览器主要采用Google Chrome浏览器，如书中无特别说明，请在以上环境中学习本书的实例。如果在Google Chrome浏览器中无法正常测试，请用火狐浏览器或IE浏览器的较新版本进行测试。实际上，本书中的大多数实例均可单文件测试，即在源代码文件夹中右击HTML源文件，例如myHtmlA058.html，在右键菜单中选择打开方式HGoogle Chrome命令，即可在谷歌浏览器中正常运行该实例。在记事本程序中可查看源代码。
全书的所有内容和思想并非一人之力所能及，而是凝聚了众多热心人士的智慧并经过充分的提炼和总结而成，在此对他们表示崇高的敬意和衷心的感谢！本书编写人员包括罗帅、罗斌、汪明云、曹勇、陈宁、邓承惠、邓小渝、范刚强、何守碧、洪亮、洪沛林、江素芳、蓝洋、雷国忠、雷惠、雷玲、雷平、雷治英、刘恭德、刘兴红、罗聃、唐静、唐兴忠、童缙嘉、汪兰、王彬、王伯芳、王年素、王正建、吴多、吴诗华、杨开平、杨琴、易伶、张志红、郑少文等，终稿由罗斌统筹完成。由于时间关系和作者水平原因，本书内容有可能存在少量对HTML5、CSS3、SVG等技术认识不全面或偏颇的地方，以及一些疏漏和不当之处，敬请读者批评指正。
读者可将购书凭证发送至邮箱huangzh@tup.tsinghua.edu.cn索取本书源代码。
罗帅罗斌2018年5月于重庆渝北
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
