Web前端开发之CSS

Web前端开发之CSS_3

CSS3 新特性
动画
媒体查询
雪碧图
字体图标

1. CSS3 新特性

1.1 圆角

使用CSS3 border-radius 属性，可以给任何元素制作“圆角”。border-radius属性，可以使用以下规则：

四个值：依次为左上角、右上角、右下角和左下角（顺时针）
三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
两个值：第一个值为左上角和右下角，第二个值为右上角和左下角
一个值：四个圆角值相同

1.2 阴影

box-shadow向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影的颜色

2. 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%

2.1 @keyframes创建动画

@keyframes name{ // name：动画名称，开发人员自己命名

from|0%{

css样式

        }

percent{ // 为百分比值，可添加多个百分比值

css样式

        }

to|100%{

css样式

        }

}

2.2 animation执行动画

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

值	描述
name	设置动画名称
duration	设置动画持续时间
timing-function	设置动画效果的速率（如下）
delay	设置动画的开始时间（延时执行）
iteration-count	设置动画循环的次数，infinite为无线次数的循环
direction	设置动画播放的方向（如下）
animation-play-state	控制动画的播放状态：running代表播放，pause代表停止播放

timing-function值	描述
ease	逐渐变慢（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认值为normal表示向前播放
alternate	动画播放在第偶数次向前播放，第奇数次反方向播放

2.3 切换背景颜色

div{

        width: 200px;

        height: 200px;

        background-color: red;

        animation: myAnim 3s linear 0s infinite;

}

div:hover{

        animation-play-state: paused; // 可用于更改背景颜色

}

@keyframes myAnim{

        0%{

                width: 200px;

                background-color: red;

        }

        50%{

width: 400px;

background-color: green;

        }

        100%{

width: 200px;

background-color: red;

        }

}

2.4 呼吸效果

.box{

        width: 500px;

        height: 500px;

        margin: 40px auto;

        background-color: #2b92d4;

        border-radius: 5px;

        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);

        animation: breathe 1s ease-in-out infinite alternate;

}

@keyframes breathe{

        0%{

opacity: 0.2;

box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);

        }

        50%{

opacity: 0.5;

box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76);

        }

        100%{

opacity: 1;

box-shadow: 0 1px 30px rgba(59, 255, 255, 1);

        }

}

3. 媒体查询

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

3.1 设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

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

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

3.2 媒体查询语法

<div class="box"></div>

哈哈哈

呵呵呵

@media screen and (max-width:768px) { /* 设备小于768px加载样式 */

        .box{

background-color: aqua;

        }

        .p1{

display: none;

        }

        .p2{

display: none;

        }

}

@media screen and (min-width:768px) and (max-width:996px) {

        .box{

background-color: chartreuse;

        }

        .p1{

display: none;

        }

        .p2{

display: block;

        }

}

@media screen and (min-width:996px) {

        .box{

background-color: red;

        }

        .p1{

display: block;

        }

        .p2{

display: block;

        }

}

4. 雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。

优点：

减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

原理：

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

.icon{

display:block; // 设置为块级元素后，可设置宽高属性

background-image:url(1.png);

background-position: -20px 0;

width:45px;

height:70px;

}

.icon2{

display:block;

background-image:url(1.png);

background-position: -93px -84px;

width:45px;

height:70px;

}