CSS3高级应用
在传统的Web设计中,当网页中需要显示动画或特效时,需要使用JavaScript脚本或者Flash来实现。在CSS3中,提供了对动画的强大支持,可以实现旋转、缩放、移动和过渡等效果。
过渡
属性 | 描述 | 属性值 |
---|---|---|
transition-property | 用于指定过渡效果 | ①none ②all ③property(定义多个属性用逗号分隔) |
transition-duration | 用于指定过渡的持续时间 | s/ms |
transition-timing-function | 过渡效果的速度曲线 | ①linear:线性过渡 ②ease:平滑过渡(默认)③ease-in:由慢到快 ④ease-out:由快到慢 ⑤ease-in-out:由慢到快再到慢 |
transition-delay | 过渡的延迟时间 | s/ms |
transition | 复合属性 | property duration timing-function delay(不能颠倒)(后两个可省略) |
注意:谁做过渡给谁加
变形
transofrm:①none:不变形 ②transform-function:变形函数
变形函数:
函数 | 说明 |
---|---|
translate(x-value,y-value) | 省略第二个参数默认为0 |
scale(x-axis,y-axis) | 省略第二个参数默认为第一个值 |
skew(x-angle,y-angle) | 角度值,省略第二个默认为0 |
rotate(angle) | 角度值 |
动画
(1)创建动画
@keyframes 动画名称(引用唯一标识){
@keyframes-selector{css-styles};
}
keyframes-selector:关键帧选择器 值:百分比、from(0%)或者to(100%)
css-styles:
属性值 | 描述 |
---|---|
animation-name | 动画名称 ①none(默认 适用于所有块元素和行内元素)②keyframename |
animation-duration | 动画完成所需要的时间 |
animation-timing-function | 动画曲线效果 |
animation-delay | 延迟时间 |
animation-iteration-count | 动画播放的次数 infinite(循环) |
animation-direction | 动画播放的方向 ①normal(默认)②alternate(奇数正向、偶数逆向) |
animation | 复合属性 animation-name animation-duration (必须有) |
CSS3滤镜
CSS3 滤镜是对图像等图形元素执行视觉效果操作,如模糊,平衡对比度或亮度, 色彩饱和度等。
注意: 任何版本的 Internet Explorer 当前均不支持 CSS3 滤镜效果。较旧的 IE 版本支持非标准 filter 属性来创建诸如不透明度之类的效果,但是该功能已被弃用。
filter属性,该属性按提供的顺序接受一个或多个滤镜功能。
属性值 | 描述及参数 |
---|---|
blur | 设置模糊 (默认为0px) |
brightness | 设置图像亮度(默认为1 不允许负值) |
contrast | 调整图像对比度(默认为1 可为200%等) |
drop-shadow | 添加阴影(类似于box-shadow属性,参数为阴影水平偏移、垂直偏移、模糊半径、阴影颜色) |
grayscale | 转换为灰度(默认为0) |
invert | 反转效果(默认为0 不允许负值) |
opacity | 应用不透明度(默认为1) |
sepia | 复古效果(红褐色)效果(默认为0)使黑白照片具有暖色调,增强存档质量 |
saturate | 调整饱和度(默认为1 可为200%等) |
精灵技术
CSS Sprites 在国内很多人叫 css 精灵,是一种网页图片应用处理方式。在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以, 访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。
而应用精灵技术,它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,当访问该页面时,载入的图片就不会像以前那样一幅一幅地显示出来。
总结:减少服务器请求次数,提高页面加载速度
制作精灵图遵循原则:
- 精灵图上放的都是小的装饰性的背景图片,插入图片不能往上放
- 精灵图的宽度取决于最宽的那个背景
- 可以横向摆放也可以纵向
- 移动背景图片位置,使用background-position 属性
- 一般情况下都是往上往左移动,所以数值是负值
- 使用精灵图需要精确测量,没个小背景图片的大小和位置
字体图标
主要用于显示网页中通用、常用的一些小图标。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体
优点:
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器,请放心使用
使用步骤:
- 字体图标的下载 (icomoon 字库、阿里 iconfont 字库 )
- 字体图标的引入 (引入到我们html页面中)
- 字体图标的追加 (以后添加新的小图标)
CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS 初始化
简单理解: CSS初始化是指重设浏览器的样式 (也称为CSS reset)
每个网页都必须首先进行 CSS初始化
/* 把所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
text-decoration: none
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
Unicode编码字体:
把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如:
- 黑体 \9ED1\4F53
- 宋体 \5B8B\4F53
- 微软雅黑 \5FAE\8F6F\96C5\9ED1
CSS相关技巧
CSS三角
网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。
<div class="box"></div>
.box{
width: 0;
height: 0;
/* 照顾兼容性 */
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
CSS用户界面样式
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
鼠标样式 cursor
li {cursor: pointer; }
属性值 | 描述 |
---|---|
default | 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
轮廓线 outline
input {outline: none/0; }
防止拖拽文本域 resize
textarea{ resize: none;}
vertical-align属性应用
经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
属性值 | 描述 |
---|---|
basline | 默认,元素放在父元素基线上 |
top | 元素顶端与行中最高元素的顶端元素对齐 |
middle | 元素放在父元素中部 |
bottom | 元素顶端与行中最低元素顶端对齐 |
属性应用:
- 图片、表单和文字对齐
图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。 给图片、表单这些行内块元素的 vertical-align 属性设置为 middle - 解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。①给图片添加 vertical-align:middle | top| bottom 等。(推荐) ②把图片转换为块级元素 display: block
溢出文字省略号显示
单行文本溢出显示省略号:
/*1. 先强制一行内显示文本*/
white-space: nowrap; ( 默认 normal 自动换行)
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
多行文本溢出显示省略号:
多行文本溢出显示省略号,有较大兼容性问题, 适合于webKit浏览器或移动端(移动端大部分是webkit内
核)
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;