CSS（六）CSS3新特性-526互联

圆角和阴影

圆角，使用 border-radius 可以给任何元素制作圆角
阴影，box-shadow 向框添加一个或多个阴影：box-shadow: h-shadow v-shadow blur color

h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊距离
color 阴影的颜色

动画

使用百分比来规定变化发生的时间，0%和100%，或用关键字 from和to

1、@keyframes 创建动画

# name 动画名称
# percent 百分比值，可以添加多个百分比值，为动画过程
@keyframes name{
    from|0%{
        css样式
    }
    percent{
        css样式
    }
    to|100%{
        css样式
    }
}

2、使用动画

在需要动画的css定义中添加属性 animation

div{
    animation: ...;
}

animation: name duration timing-function delay iteration-count direction

name 动画名称
duration 动画播放持续时间
timing-function 动画效果的速率
- ease 逐渐变慢，默认值
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
delay 延迟执行时间
iteration-count 播放动画循环次数，infinite 为无限次
direction 动画播放的方向

normal 向前播放

3 、执行动画

animation-play-state 控制动画播放状态：running 播放，paused 停止

# 添加一个动画执行的时机
div:hover{
    animation-play-state:running;
}

媒体查询

使页面在不同终端设备下达到不同效果，会根据设备的大小自动识别加载不同的样式

<meta>标签

使用设备宽度作为视图宽度，禁止初始的缩放，在<head>中使用<meta>

<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1 user-scalable=no">

参数解释：

width=device-width，宽度等于当前设备宽度
initial-scale，初始缩放比例，默认为1
maximum-scale，允许用户缩放到的最大比例，默认为1
user-scalable 用户是否可以手动缩放，默认为no

@media screen and (max-width: 768px) {
    /*设备小于768px加载的样式*/
    div{
        background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
    /*设备在 768px ~ 992px加载的样式*/
    div{
        background-color: blue;
    }
}
@media screen and (min-width: 992px) {
    /*设备大于992px加载的样式*/
    div{
        background-color: green;
    }
}