前言
通过使用特效,可以使网页内容更加生动美丽
一、阴影
阴影分为盒阴影和文本阴影,其属性如下。(模糊距离不能为负数)
/* 阴影 */
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);