css特效详解

目录

一、阴影

二、渐变

三、过渡

四、变形

---

一、阴影

1、盒模型阴影：box-shadow

        box-shadow：横向偏移量  纵向偏移量  模糊距离 阴影颜色;

注意：向右和向下为正方向。

           模糊距离不能为负。

           横向偏移量和纵向偏移量设置都为0，则向四个方向偏移 。

box-shadow: 0 0 10px lightgray;

2、文本阴影：text-shadow

        text-shadow：横向偏移量  纵向偏移量  模糊距离  阴影颜色;

text-shadow: 0 0 10px black;

二、渐变

1、浏览器兼容问题

        适用于谷歌浏览器：
        background-image: -webkit-linear-gradient(left bottom,hotpink,skyblue);
        适用于火狐浏览器：
        background-image: -moz-linear-gradient(left bottom,hotpink,skyblue);

2、线性渐变

     linear-gradient(方向，颜色，颜色····);

     沿着某个方向进行颜色的变化，定义方向或者角度

（1）可以设置一个方向值，从左面开始，到右面

background-image:-webkit-linear-gradient(left,hotpink,skyblue);

 

（2）可以设置两个方向值，从左下开始，到右上

background-image:-webkit-linear-gradient(left bottom,hotpink,skyblue);

 

 

（3）0-20%颜色为hotpink，80%-100%颜色为skyblue，20%-80%为两种颜色过渡

background-image:-webkit-linear-gradient(left bottom,hotpink 20%,skyblue 80%);

 

3、径向渐变

radial-gradient(方向，颜色，颜色····);

以某个点为中心点向四周进行颜色的辐射，定义辐射点的圆心（需要两个值）

background-image:-webkit-radial-gradient(center bottom,white 40%,tomato,orange,yellow,green,turquoise,deepskyblue,purple,white 60%);

三、过渡

transition：属性名 过渡时间 过渡延迟时间 过渡效果速度曲线

四、变形

1、平移

单位：px

水平移动：transform:translateX();

垂直移动：transform:translateY();

垂直平面移动：transform:translateZ();

2、旋转

单位：deg、turn、grad，下面都为旋转一圈

transform:rotateX(360deg);

transform:rotateY(1turn);

transform:rotateZ(400grad);

3、伸缩

没有单位

下面都为伸缩1.5倍

整体伸缩：transform:scale(1.5);

横向伸缩：transform：scaleX(1.5);

纵向伸缩：transform：scaleY(1.5);

4、倾斜

单位：deg

横向倾斜：transform：skewX();

纵向倾斜：transform：skewY();