前端工程师技能总结之H5、CSS3篇（二）

动画效果

鼠标的移入效果 hover

:before与after的设置

*使用hover的时候要注意选中的对象是谁，分不清则会很混乱。

transition属性:过渡

transition:all .3s ease-out;

达成的条件：

1. 参与过渡的属性
2. 过渡的时间
3. 过渡的类型（可选）linear线性变化、ease-in、ease-out
4. 延迟的时间（可选）

过渡的原理：初始状态A向结束状态过渡必须有初始和结束状态，否则无法过渡，过渡效果最好是写在初始状态

设置透明度：opacity:1->0有渐变的效果。

border-radius:10px;通常用于修饰四个圆角，当值等于宽高时就相当于弧度画圆。若有4个值则分别代表顺时针方向。

box-shadow：(盒子阴影)立体感

box-shadow:5px 5px 10px 0 grey;

1. x轴偏移
2. y轴偏移
3. 模糊值，数值越大越模糊
4. 外延值，向四边扩散
5. 颜色
6. 通过设置inset添加内部阴影

移入+动效

transform:hover{
    translate(x,y);//x轴平移，y轴平移
    scale(1.2);//倍数，缩放与翻转
    skew(x,y);//x轴扭曲，y轴扭曲
    rotate(360deg);//旋转角度
}

transfrom只对块级元素有效

background-image:背景渐变

1. 渐变方向：top right bottom left
2. 起始颜色
3. 终止颜色

-webkit-linear-gradient(45deg,black,red,yellow)

百分比设置，后一个比前一个大

1. 百分比是终止位置，第二个是起始位置+前一个的终止位置（中间做过渡）
2. 圆心位置（center,left,right,bottom）
3. 渐变起始颜色
4. 渐变终止颜色

-webkit-radial-gradient(center,#fff48c 30%,#ffd72e 60%,orange 90%)

动画属性

animation:myMove 2s linear 2s infinite alternate;//反向运动

动画规则：

1. 调用名
2. 持续Time
3. 过渡类型
4. 延迟Time
5. 播放次数（默认给1次）
6. 是否停留在结束状态forwards
7. alternative;//反向运动

声明类型一：

@-webkit-keyframs myMove{
    from{
        
    }to{
    
    }

}

类型二：

@-webkit-keyframes myMove{

0%{
    //状态量
}
25%{
    //状态量
}
50%{
    //状态量
}
75%{
    //状态量
}
100%{
     //状态量
}
}