2019-10-22

1、css3圆角 阴影 透明度

（1）圆角

/*左上角为椭圆圆角*/

border-top-left-radius: 100px 50px;

/*左、右上角为正圆圆角*/

border-top-left-radius: 100px;

border-top-right-radius: 100px;

/*曲率半径为40的圆角矩形*/

border-radius: 40px;

/*最大200px，20%即40px*/

border-radius: 20%;

/*正圆*/

border-radius: 50%;

（2）阴影

/*水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影*/

box-shadow: 0px 0px 20px 2px red inset;

（3）透明度

/*透明度30%，文字也透明了*/

opacity: 0.3;

filter: alpha(opacity=30);/*兼容IE*/

/*背景色变透明，但文字不会透明*/

background-color: rgba(255,215,0,0.3);

margin: 50px auto 0;

/*边框透明*/

border: 2px solid rgba(0,0,0,0.3);

border-radius: 50%;

text-align: center;

line-height: 200px;

2、transition动画

transition-property：设置过渡的属性 eg：{transition-property：width/height/background-color}

transition-duration：设置过渡的时间 eg：1s 500ms

transition-timing-function：设置过渡的运动方式

 linear：匀速

 ease：开始和结束慢速

 ease-in：开始是慢速

 ease-out：结束时慢速

 ease-in-out：开始和结束时慢速

 cubic-bezier(n,n,n,n)：曲线设置，用时查找

 transition-delay：设置动画的延迟

 transition: property duration timing-function delay 同时设置四个属性

 transform变换：

 translate(x,y)：设置盒子位移    （x为水平方向上，y为垂直方向上）

 scale(x,y)：设置盒子缩放

 rotate(deg)：设置盒子旋转

 skew(x-angle,y-angle)：设置盒子斜切    （单位为deg）

 perspective：设置透视距离（通常设为800px）

 transform-style flat | preserve-3d：设置盒子是否按3d空间显示

 translate(X,Y,Z)：设置三维移动

 rotate(X,Y,Z)：设置三维旋转

 scale(X,Y,Z)：设置三维缩放

 tranform-origin：设置变形的中心点

 backface-visibility：设置盒子背面是否可见    {backface-visibility：hidden；（背面不可见）}

 3、animation动画

@keyframes：定义关键帧动画

animation-name：动画名称

animation-duration：动画时间

animation-timing-function：动画曲线

linear：匀速

ease：开始和结束慢速

ease-in：开始是慢速

ease-out：结束时慢速

ease-in-out：开始和结束时慢速

steps：动画步数

animation-delay：动画延迟

animation-iteration-count：动画播放次数 n|infinite

animation-direction

normal：默认动画结束不返回

Alternate：动画结束后返回

animation-play-state：动画状态