网页的特效效果

---

前言

通过使用特效，可以使网页内容更加生动美丽

---

一、阴影

阴影分为盒阴影和文本阴影，其属性如下。（模糊距离不能为负数）

            /* 阴影 */
			box-shadow: 横向偏移量 纵向偏移量 模糊距离 阴影颜色;
			text-shadow: 横向偏移量 纵向偏移量 模糊距离 阴影颜色;
			/* eg */
			box-shadow: 10px 10xp 10px #00BFFF;

当需要添加多个方向或是多层阴影时，只需对阴影的偏移量改动即可

            text-shadow: -5px -5px 8px #cd12c8,
			             5px -5px 8px #cd12c8,
						 -5px 5px 8px #cd12c8,
						 5px  5px 8px #cd12c8;

这样可以在文本四周添加阴影。

二、 渐变

渐变通常是作为背景图片使用，分为线性渐变和镜像渐变
属性为（渐变方向，颜色 百分比）
代码如下：

           /* 线性渐变 */
			background-image: linear-gradient(left, cyan 20%, gold 50%, tomato, hotpink, skyblue);
			/* 镜像渐变 */
			background-image: radial-gradient(red 10%,skyblue 20%,yellow);

效果如下：

三、过度

过渡内容如下：

四、变形

变形分为平移（translate），旋转（rotate），伸缩（scale），拉扯（skew）等

			/* 平移 */
			transform: translate(100px);
			transform: translateX();
			transform: translateY();
			transform: translateZ();
			
			/* 旋转 */
			transform: rotate(360deg);
			transform: rotateX();
			transform: rotateY();
			transform: rotateZ();
			
			/* 缩放 */
			transform: scale(3);
			transform: scaleX();
			transform: scaley();
			transform: scaleZ();
			
			/* 倾斜 */
			transform: skew(90deg);
			transform: skex(90deg);
			transform: skey(90deg);
			
			/* 单位 */
			360deg=1turn=400grad

五、过滤

代码如下（示例）：

			/*模糊*/
			filter: blur(1px);
			/*亮度*/
			filter: brightness(2)
			/*对比度*/
			filter: contrast(2);
			/*阴影*/
			filter: drop-shadow(5px 5px 5px tomato);
			/*灰度*/
			filter: grayscale(1);
			/*色相转变*/
			filter: hue-rotate(360deg);
			/*反转*/
			filter: invert(1);
			/*透明度*/
			filter: opacity(.25);
			/*饱和度*/
			filter: saturate(4.25);
			/*褐色*/
			filter: sepia(.5);

---