HTML5特效（shadow、gradient、transition、transform、filter）

文章目录

阴影（shadow）
- box-shadow
- text-shadow
渐变（gradient）
- linear-gradient
- radial-gradient
过渡（transition）
变形（transform）
滤镜（filter）

注意!
由于HTML5的兼容性，不同版本的浏览器的显示效果可能不一样，所以要注意兼容性问题。笔者使用的浏览器是Chrome，就需要在属性前添加-webkit-

阴影（shadow）

阴影主要有两种，分别为box-shadow和text-shadow，主要观察阴影的延展方向以及颜色。
其中主要包含四个属性，分别为水平阴影、垂直阴影、模糊距离、阴影颜色

box-shadow

语法：

div {width: 100px;height: 100px;background-color: pink;box-shadow: 10px 8px 0 gray;/*属性：水平阴影 垂直阴影 模糊距离 阴影颜色*/
}

显示结果如图：

分析一下可以知道，阴影从该div块的中心射出，这些阴影可以假设组合成了一个和div块重合的阴影块，该阴影块的位置是可以相对移动的，可以通过设置模糊距离来显示它的作用范围。
比如现在我将它的阴影块如下设置：

div {width: 100px;height: 100px;background-color: pink;box-shadow: 50px 50px 50px gray;/*属性：水平阴影 垂直阴影 模糊距离 阴影颜色*/
}

显示图像为：

一个圆，看见了吗？

text-shadow

字体阴影也差不多

p {background-color: yellowgreen;color: black;text-shadow: -1px -1px 0 white;
}

显示效果如图：

实际开发中，可能还会设置多层字体阴影以达到层级效果

渐变（gradient）

渐变用于背景图（background-image），也分为两种，分别是水平渐变linear-gradient和垂直渐变radial-gradient，需要注意渐变方向和颜色变化及范围，如果不指明某颜色的范围，则等比例变化
主要属性为：（方向, 颜色1 百分比, 颜色2 百分比……）

linear-gradient

水平渐变，顾名思义，就是以线性方式实现颜色的变化，方向可以设置为left、top、right、bottom

div:nth-of-type(1) {/* 注意兼容性问题！以下代码不再做提醒 */background-image: -webkit-linear-gradient(left, cyan 20%, gold 50%, tomato, hotpink, skyblue);background-image: linear-gradient(left, cyan 20%, gold 50%, tomato, hotpink, skyblue);
}

显示效果如图：

radial-gradient

垂直渐变，注意背景图颜色变化是从一个点开始的，从内向外扩散

div:nth-of-type(2) {background-image: -webkit-radial-gradient(top,hotpink,skyblue, gold, orange, tomato);background-image: radial-gradient(top,hotpink,skyblue, gold, orange, tomato);
}

显示效果如图：

方向设置成top，默认以顶部中间位置为圆心，也可以从左上方(top left)开始：

div:nth-of-type(2) {background-image: -webkit-radial-gradient(top left,hotpink,skyblue 50%, gold, orange, tomato);background-image: radial-gradient(top left,hotpink,skyblue 50%, gold, orange, tomato);
}

显示结果如图：

如果不设置方向，那就默认从中间圆心处开始向外扩散

过渡（transition）

过渡，可以玩得花里胡哨，主要用于设置不同状态间的转变效果，它有四个属性，分别为：

属性名	作用
transition-property	设置过渡属性名称
transition-duration	定义过渡时间
transition-delay	定义延时执行时间
transition-property	设置过渡的时间曲线

这有张图

通常使用时不会如此花哨，就设置一个过渡时间transition-duration
比如：

div {width: 100px;height: 100px;background-color: cyan;/* 设置渐变时间为0.3s */transition: .3s;
}
div:hover {cursor: pointer;width: 300px;height: 200px;background-color: pink;
}

鼠标未移至div上时显示效果如图：

鼠标移至div上后显示效果如图：

（还没试过上传动图到博文将就用用吧别问问就是懒自己码码就知道它怎么变的了）

变形（transform）

变形，可以改变元素位置、形状、大小
有五个属性：

属性名	作用	单位
translate[X/Y/Z]	平移	px
rotate[X/Y/Z]	旋转	deg、turn、grad
scale[X/Y/Z]	伸缩	数值
skew[X/Y]	拉扯	deg
transform-style:preserve-3d	3d效果

额，这个就留给大哥们自己去动手码码吧~
下面是代码格式，等我啥时候会了贴动图再来添加动画

div {width: 200px;height: 200px;background-color: pink;transition: .5s;
}
div:hover {/*平移*//*transform: translateX(100px);*//*旋转   deg   turn  grad*//*transform: rotate(360deg);*//* transform: rotate(1turn); *//*transform: rotate(400grad);*//* transform: rotateX(90deg); *//*缩放*//* transform: scaleY(.2); *//* transform: scale(3); *//*倾斜*//* transform: skewY(-90deg); */
}

滤镜（filter）

滤镜，在线修图，功能多，用的时候再看吧
原图：

毁灭吧赶紧的

属性名	作用	取值范围
filter:blur(4px)	模糊	大于0

filter:brightness(2)	亮度	正自然数

filter: contrast(5)	对比度	正自然数

filter: drop-shadow(5px 5px 5px tomato)	阴影

filter: grayscale(1);	灰度	[0,1]

filter: hue-rotate(180deg);	色相转变	[0,360deg]

filter: invert(1)	反转颜色	[0,1]

filter: opacity(.25)	透明度	[0,1]

filter: saturate(10)	饱和度	[0,10]

filter: sepia(.5)	褐色	[0,1]

代码如下：

div {width: 200px;height: 200px;background-image: url(img/xhr.jpeg);background-size: cover;/*模糊*//* filter: blur(5px); *//*亮度*//* filter: brightness(2); *//*对比度*//* filter: contrast(5); *//*阴影*//* filter: drop-shadow(5px 5px 5px tomato); *//*灰度*//* filter: grayscale(1); *//*色相转变*//* filter: hue-rotate(180deg); *//*反转*//* filter: invert(1); *//*透明度*//* filter: opacity(.25); *//*饱和度*//* filter: saturate(10); *//*褐色*//* filter: sepia(.5); */
}