CSS（六）CSS3新特性

圆角和阴影

  • 圆角，使用 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;
    }
}

雪碧图

css sprite是一种网页图片应用处理方式，允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。

优点：

  • 减少图片的字节

  • 减少网页的http请求，提高页面性能

原理：

  • 通过background-image引入背景图片

  • 通过background-position把背景图片移动到自己需要的位置

posted @ 2023-07-03 19:20  hjy1995  阅读(15)  评论(0)  编辑  收藏  举报