css3重点以及css3动画

css3圆角

div
{
border:2px solid;
border-radius:25px;
}

css3阴影

div{
box-shadow: 10px 10px 5px #888888;
text-shadow:10px（右） 10px（下） 5px（阴影大小） red（阴影颜色）;    
}

css3线性渐变

 background: linear-gradient(0deg,yellow ,red);从下到上进行渐变
 background: linear-gradient(90deg,yellow ,red);从左到右进行渐变

圆形渐变

 background: radial-gradient(red,yellow);从中间向外渐变

css3自定义字体导入

 @font-face {
            font-family: maomnao ;
            src:url(../css/font.ttf)
        }
        body{
            font-family: maomnao;
        }

2D动画

1.平移（默认x轴）

  transform: translatex(20px)    translatey(20px)  translatez(20px)

2.旋转（默认z轴）

   transform:rotatex(90deg)  rotatey(90deg)   rotatez(90deg)  
   transform-origin:50%,50% （旋转中心）

旋转中心 共两个参数，第一个参数表示相对于左上角原点水平方向的距离，第二个参数表示相对于左上角原点垂直方向的距离

3.变形

transform: skew( 20deg) 正左负右

4伸缩（w,h）

transform: scale(2,4);

过渡动画
1.动画延迟 transition-delay
2. 动画执行时间 transition-duration
3.动画执行方式 transition-timing-function ：linear(匀速) ease-in(开始慢) ease-in-out（开始慢结束慢）
4.过渡属性名称 transition-property 多个属性用'，'或者all

帧动画

 .box {
            width: 200px;
            height: 200px;
            background-color: #ae0000;
            animation:yidong 1s linear  infinite alternate;
        }
        @keyframes yidong {
            from{《百分比》
                transform: translatex(0px);
            }
            to{
                transform: translatex(30px);
            }
        }

1.动画过渡名称 animation-name: myfirst;
2.动画执行时间 animation-duration: 5s;
3.动画执行方式 animation-timing-function: linear;
4. 动画延迟 animation-delay: 2s;
5.动画执行次数 animation-iteration-count: infinite;（循环）
6.动画执行的方向 animation-direction: alternate;（奇数次正向播偶数次反向播）

7.animation-fill-mode:forwards( 停止在动画执行完成的位置)

2D转3D

transform-style:preserve-3d;

css3重点以及css3动画

猜你喜欢