css3新特性

圆角和阴影

圆角：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（也可以大于高度）。

案例：

 阴影：box-shadow可以为元素添加阴影，支持添加一个或者多个。

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

案例：

   .box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 50%;
            box-shadow: 15px 15px 10px rgba(185, 184, 184, 0.6) inset,
             8px 8px 5px rgba(0, 0, 0, 0.6);
        }

效果：

css过渡(transition)动画

 transition四个属性的复合样式

属性名	描述
transition-property	指定CSS属性的name，transition效果（元素上的什么css属性变化，默认是all，上面例子就是div的width变化，设置为none则无变化）
transition-duration	transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默认0）
transition-timing-function	指定transition效果的转速曲线 （匀速呢？还是先快后慢，或是先慢后快，等等...默认ease）
transition-delay	定义transition效果开始的时候（等多久开始，默认0）

transition-property默认是all，也可以写none，那就没有渐变效果了，等于没写。

第二个参数就是动画耗时 transition-duration，默认是0，所以必不可少，要不然没有动画效果。

第三个参数transition-timing-function的值：

• ease（默认值）逐渐变慢
• linear 匀速
• ease-in 加速
• ease-out 减速
• ease-in-out 先加速后减速
• cubic-bezier贝塞尔曲线(x1,y1,x2,y2)

第四个参数是延迟时间，就是等待多久才开始执行动画。（在做导航栏下拉菜单时，有个延迟时间，让鼠标划过时不会立即显示，防止误划）上面的都没有设置，如果设置为2s，那边鼠标移动上去div上，div是hover状态，但是要等2s后，动画执行开始，如果不到2s鼠标就移开了，div就不是hover状态了，那就不执行动画了。

案例：鼠标悬浮div，高度变高   颜色由aquamarine变为pink

 animation动画

CSS3的animation属性可以像flash制作动画一样，通过关键帧控制动画的每一步，实现更为复杂的动画效果。使用方法：

1）利用@keyframes声明一个关键帧组。

2）在animation属性中调用上述声明的的关键帧组，来实现动画。

animation属性的值：

1）animation-name：指定一个关键帧动画的名字，由@keyframes声明。

当值为none时（默认值），将没有任何动画效果，其可以用于覆盖任何动画。

2）animation-duration：动画持续时间，单位为s或ms，一般使用秒

3）animation-timing-function：动画的播放方式函数：linear、ease-in等

4）animation-delay：动画开始之前的延迟时间

5）animation-iteration-count：指定动画的循环次数

取值一般为整数，默认值为1，即只播放一次，如果取值为infinite，动画将会无限次地播放。

6）animation-direction：动画的播放方向。

默认值为normal，即动画每次循环都向前播放，取值为alternate时，动画播放为偶数次则向前播放，为奇数次则反方向播放，例如一个反复的弹跳动画。。。

案例：

            width: 88px;
            height: 88px;
            border-radius: 50%;
            background-color: rgb(255, 213, 0);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation-name: ddddd;
            /* 指定动画的 */
            animation-duration: 0.5s;
            /*动画持续的时间*/
            animation-fill-mode: forwards;
            /*动画填充榜样式停留在最后一个*/
            /*animation-delay:动画延迟的时间，当值为负头*/
            /*animation-delay: 2s;*/
            animation-direction: alternate;
            animation-iteration-count: infinite;