《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设置borderimage属性实现重复边框图案
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使用负数参数获取图像的水平和垂直镜像

　　第3部分动画
　　245使用transition属性平滑地旋转图像
　　此实例主要在CSS样式中设置元素的transition属性，从而使图像在指定的时间内旋转指定的角度。当在Google Chrome浏览器中显示该页面时，图像在0°时状态如图2451所示； 当鼠标指针悬浮在图像上时，则图像将在5秒内以线性过渡的方式从0°旋转到270°，如图2452所示。有关此实例的主要代码如下。
　　图2451
　　图2452
　　上面有底纹的代码是此实例的核心代码。在该部分代码中，transition: transform 5s linear用于设置图像在5秒内以线性过渡方式执行transform所定义的操作(此实例是旋转270°)。CSS3的transition允许属性值在一定的时间内平滑地过渡，这种效果可以在鼠标单击、获得焦点、被单击或对元素的任何改变中触发，并平滑地以动画效果改变属性值。transition的语法格式如下。
　　transition: ［<'transition-property'> || <'transition-duration'>
　　|| <'transition-timing-function'> || <'transition-delay'>
　　［, ［<'transition-property'> || <'transition-duration'> ||
　　<'transition-timing-function'> || <'transition-delay'>］］*
　　从以上可以看出，transition主要包含4个属性值，即transitionproperty(执行变换的属性)、 transitionduration(变换延续的时间)、transitiontimingfunction(在延续时间段变换的速率变化)、transitiondelay(变换延迟时间)。
　　transitionproperty属性值用来指定当元素的一个属性改变时执行transition效果，主要的值为none(没有属性改变)、all(所有属性改变，这也是其默认值)、ident(元素属性名)。当ident值为none时，transition马上停止执行； 当ident值指定为all时，则元素的任何属性值产生变化时都将执行transition效果，ident是可以指定的元素的某一个属性值。ident对应的类型如下。
　　(1) color： 通过红、绿、蓝和透明度组件变换，例如bordercolor、backgroundcolor、 color、outlinecolor等属性。
　　(2) length： 真实的数字，例如wordspacing、width、verticalalign、top、right、bottom、left、padding、outlinewidth、margin、minwidth、minheight、maxwidth、maxheight、lineheight、height、borderwidth、borderspacing、backgroundposition等属性。
　　(3) percentage： 真实的数字，例如wordspacing、width、verticalalign、top、right、bottom、left、minwidth、minheight、maxwidth、maxheight、lineheight、height、backgroundposition等属性。
　　(4) integer： 离散步骤(整个数字)，在真实的数字空间以及使用floor()转换为整数时发生，例如outlineoffset、zindex等属性。
　　(5) number： (浮点型)数值，例如zoom、opacity、fontweight等属性。
　　(6) transform list： 对元素进行旋转、缩放、移动或倾斜等。
　　(7) rectangle： 通过x、y、width和height(转为数值)变换，例如crop。
　　(8) visibility： 离散步骤，在0到1数字范围之内，0表示隐藏，1表示完全显示，例如visibility。
　　(9) shadow： 作用于color、x、y和blur(模糊)属性，例如textshadow。
　　(10) gradient： 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或者线性的)和相同的停止数值，以便执行动画，例如backgroundimage。
　　(11) paint server(SVG)： 只支持从gradient到gradient以及从color到color，之后的工作与上面类似。
　　(12) spaceseparated list of above： 如果列表有相同的项目数值，则列表中的每一项按照上面的规则进行变化，否则无变化。
　　(13) a shorthand property： 如果缩写的所有部分都可以实现动画，则像所有单个属性变化一样变化。
　　transitionduration属性值用来指定元素转换过程的持续时间，取值为数值，单位为s(秒)或者ms(毫秒)，可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换是即时的。
　　transitiontimingfunction属性值允许根据时间的推进去改变属性值的变换速率，transitiontimingfunction有以下6个可能值。
　　(1) ease： 逐渐变慢，默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。
　　(2) linear： 匀速，linear函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。
　　(3) easein： 加速，easein函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。
　　(4) easeout： 减速，easeout函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)。
　　(5) easeinout： 加速然后减速，easeinout函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。
　　(6) cubicbezier： 该值允许自定义一个时间曲线，特定的cubicbezier曲线。(x1, y1, x2, y2)特定于曲线上的点P1和点P2。所有值需要在［0, 1］区域内，否则无效。
　　transitiondelay属性值用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值为数值，单位为s(秒)或者ms(毫秒)，其使用和transitionduration极其相似，也可以作用于所有元素，包括before和after选择器。其默认大小是0，也就是变换立即执行，没有延迟。
　　此实例的源文件名是myHtmlB065.html。
　　246使用transition属性移动和旋转图像
　　此实例主要在元素(img)的transition属性中设置多个动作属性值，从而使图像在指定的时间内同时实现旋转和移动的动作。当在Google Chrome浏览器中显示该页面时，电话机图像的初始状态在左上角； 当鼠标指针悬浮在电话机图像上时，则电话机图像立即执行旋转和移动的动作，如图2461所示，并在指定的时间内移动到右下角，如图2462所示。有关此实例的主要代码如下。
　　图2461
　　图2462
　　上面有底纹的代码是此实例的核心代码。在该部分代码中，transition: left 5s linear, top 5s linear, transform 3s easeinout负责完成过渡动画的移动和旋转动作，其中的transform是指rotate(360deg)这个旋转动作，移动操作指元素的left值从20移动到290、top值从10移动到140，linear表示移动过程是匀速，easeinout表示旋转过程是先加速后减速。
　　此实例的源文件名是myHtmlB066.html。
　　247使用transition属性实现图像的膨胀
　　此实例主要在CSS样式中设置元素的transition属性，从而使图像在指定的时间内放大到预定的比例，以产生膨胀特效。当在Google Chrome浏览器中显示该页面时，最初的图像如图2471所示； 当鼠标指针悬浮在图像上时，则图像将逐渐膨胀，如图2472所示。有关此实例的主要代码如下。
　　图2471
　　图2472
　　上面有底纹的代码是此实例的核心代码。在该部分代码中，transition: all 3s easeinout用于设置图像在3秒内以easeinout过渡方式执行所有变更，此处即是transform所定义的操作，所以此行代码修改为transition: transform 3s easeinout也能实现相同的效果； transform: scale(1.9)用于将图像放大1.9倍； overflow: hidden用于实现当放大的图像超出div盒子的宽度和高度时自动隐藏超出部分，所以给人的错觉是在膨胀而不是在放大。
　　此实例的源文件名是myHtmlB196.html。
　　248使用transition属性实现侧滑工具栏
　　此实例主要在CSS样式中设置元素的transition属性，从而实现在页面右侧布局滑动工具栏按钮。当在Google Chrome浏览器中显示该页面时，在页面右侧的绿色工具栏上有3个按钮，如果鼠标指针悬浮在第一个按钮上，则将向左滑出说明文字，如图2481所示； 如果鼠标指针悬浮在第二个按钮上，也将向左滑出说明文字，如图2482所示； 如果鼠标指针悬浮在第三个按钮上，也将向左滑出说明文字。有关此实例的主要代码如下。
　　图2481
　　图2482
　　……

　　前言
　　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可以做很多事情。
　　CSS(Cascading 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，在右键菜单中选择“打开方式(H)”→Google Chrome命令，即可在谷歌浏览器中正常运行该实例。在记事本程序中可查看源代码。
　　全书的所有内容和思想并非一人之力所能及，而是凝聚了众多热心人士的智慧并经过充分的提炼和总结而成，在此对他们表示崇高的敬意和衷心的感谢！本书编写人员包括罗帅、罗斌、汪明云、曹勇、陈宁、邓承惠、邓小渝、范刚强、何守碧、洪亮、洪沛林、江素芳、蓝洋、雷国忠、雷惠、雷玲、雷平、雷治英、刘恭德、刘兴红、罗聃、唐静、唐兴忠、童缙嘉、汪兰、王彬、王伯芳、王年素、王正建、吴多、吴诗华、杨开平、杨琴、易伶、张志红、郑少文等，终稿由罗斌统筹完成。由于时间关系和作者水平原因，本书内容有可能存在少量对HTML5、CSS3、SVG等技术认识不全面或偏颇的地方，以及一些疏漏和不当之处，敬请读者批评指正。
　　罗帅罗斌2018年5月于重庆渝北