(二)CSS高级技巧
(序号接上一篇)CSS基础
十八、精灵图
1、为什么需要精灵图
一个网页中往往会应用很多小背景图作为装饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称为CSS Sprites、CSS雪碧)
核心原理：将网页中的一些小背景图像整合到一张大图里，这样服务器只需要一次请求就可以了。
精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度
2、精灵图(sprites)的使用
使用精灵图的核心
- 精灵技术主要针对于背景图片使用，就是把多个小背景图整合到一张大图中
- 这个大图片也称为sprites精灵图或者雪碧图
- 移动背景图片位置，此时可以使用
background-position - 移动距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值
- 使用精灵图的时候需要精确测量，每个小背景图的大小和位置
十九、字体图标
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
1、精灵图的缺点
精灵图虽然有很多优点，但缺点也很明显：
- 图片文件还是比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
此时，我们需要使用字体图标iconfont，字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2、字体图标的优点
- 轻量级：一个图标字体要比一系列的图像小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
- 灵活性：本质是文字，可以任意更改颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器
注意：字体图标并不能代替精灵技术，只是对工作中图标部分技术的提升和优化。
3、字体图标
(1)字体图标的下载
推荐网站：
- icomoon字库 http://icomoon.io
- 阿里iconfont字库 http://www/iconfont.cn/
(2)字体图标的引入
-
把下载包里面的fonts文件夹放入页面根目录下
-
在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中
一定注意路径问题
/* 字体声明 */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } -
html标签中添加小图标 在下载好的文件中的DEMO.html里面
-
给span指定样式
span { font-family: 'icomoon'; /*与字体声明保持一致*/ font-size: 100px; color: pink; }
(3)字体图标的追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包中的selection.json重新上传，然后选中想要的新图标。重新下载压缩包，替换原来的即可。
二十、CSS三角
1、三角的做法
宽高都设置为0，然后给定border值，border: 10px solid transparent;。此时再指定任意上下左右边框，就可以得到三角形。可以指定任何属性值(也就是可以修改border-size，从而得到不同高度的三角形)
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: pink;
}
2、京东三角
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
<body>
<div class="jd">
<span></span>
</div>
</body>
二十一、CSS用户界面样式
1、什么是界面样式
所谓的界面样式，就是更改一些用户操作样式，以提高用户体验。
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
2、鼠标样式 cursor
li {cursor: pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
3、取消表单轮廓
给表单添加outline:{};或者outline: none;样式，就可以去掉默认的蓝色边框。
4、防止拖拽文本域 resize
textarea{resize: none;}
二十二、vertical-align 属性应用
1、行内元素与图片垂直居中对齐
CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但它只针对于行内元素或者行内块元素有效
也就是对块级元素不起作用！
语法：vertical-align: baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
2、解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方案有两种：
- 给图片添加
vertical-align:middle | top | bottom等(提倡使用) - 将图片转换为块级元素
display: block;
二十三、溢出的文字省略号显示
1、单行文字溢出显示省略号
/* 1、先强制一行内显示文本 */
white-space: nowrap; (默认normal自动换行)
/* 2、超出部分隐藏 */
overflow: hidden;
/* 3、文字用省略号替代超出部分 */
text-overflow: ellipsis;
2、多行文字溢出显示省略号
多行文字溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webKit内核)
.multi-lines {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
二十四、常见布局技巧
1、margin负值的运用
-
可以实现盒子叠加时，边框宽度“1+1=1”
将盒子
magin-left: -1px;，正好压住相邻盒子的边框 -
鼠标经过某个盒子的时候，就会出现最后一个盒子的左边框压住倒数第二个盒子的右边框
此时可以提高当前盒子的层级来解决(如果没有定位，则添加相对定位[保留位置]；如果有定位，则加z-index)
/* 1、如果盒子没有定位，则鼠标经过添加相对定位即可 */ /* ul li:hover { position: relative; border: 1px solid blue; } */ /* 2、如果li都有定位，则利用z-index来提高层级 */ ul li:hover { z-index: 1; border: 1px solid blue; }
2、文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
<style>
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
</body>
文字会环绕浮动元素。
3、行内块的巧妙运用
将行内块元素的父元素添加text-align: center;，就可以使得所有的行内块元素居中。
4、CSS三角强化
为了制作直角三角形(且不等边)，可以先将左边框和下边框宽度设置为0，然后将上边框宽度调大，挤开右边框。
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
/* 左边和下边的边框宽度设置为0 */
border-bottom: 0 solid blue;
border-left: 0 solid green;
}
也可以采取简写形式：
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，我们需要对CSS初始化。
简单理解：CSS初始化是指重设浏览器样式(也称为CSS reset) 【每个网页都必须首先进行CSS初始化】
这里以京东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 {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
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
(三)CSS3提高
CSS3的现状 ：
- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
二十五、CSS3 新增选择器
可以更加便捷、更加自由的选择目标元素。
1、属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器。
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 匹配具有att属性且值以val开头的E元素 |
| E[att$=“val”] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性且值中包含val的E元素 |
注意：类选择器、属性选择器、伪类选择器，权重均为10
<style>
/* 必须是input 但同时具有value这个属性 才选择这个元素 */
input[value] {
color: pink;
}
/* 选择具有type属性 且属性值等于text的元素 */
input[type=text] {
color: pink;
}
/* 选择div 具有class属性 且属性值以icon开头 */
div[class^=icon] {
color: pink;
}
/* 选择section 具有class属性 且属性值以data结尾 */
section[class$=data] {
color: blue;
}
/* 选择span 具有class属性 且属性值含有span */
span[class*=span] {
color: red;
}
</style>
<body>
<!-- 1、利用属性选择器就可以不用借助于类或id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2、属性选择器还可以选择属性=值的某些元素 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3、选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4、选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">我是谁</section>
<!-- 5、选择属性值含有的某些元素 -->
<span class="span-type">元素1</span>
<span class="span-class">元素2</span>
<span class="icon-type">元素3</span>
</body>
2、结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型的第一个元素E |
| E:last-of-type | 指定类型的最后一个元素E |
| E:nth-of-type(n) | 指定类型的第n个元素E |
其中后三个与前三个的使用方法几乎一样，区别是：
- nth-child对父元素里面的所有孩子排序选择(序号是固定的)先找到第n个孩子，然后再看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子
nth-child(n)选择某个父元素的一个或者多个特定的子元素
n可以是数字、关键字和公式
-
n如果是数字，就是选择第n个子元素，里面数字从1开始
-
n可以是关键字：even偶数行，odd奇数行
-
n如果是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出元素个数的元素都会被忽略)
公式 取值 2n 偶数 2n+1 奇数 5n 5 10 15 … n+5 从第5个开始(包含第5个)到最后 -n+5 前5个(包含第5个)
<head>
<style>
/* 1、选择ul里面的第一个li */
/* ul li:first-child {
background-color: pink;
} */
/* 2、选择ul里面的最后一个li */
/* ul li:last-child {
background-color: skyblue;
} */
/* 3、选择ul里面的第五个li */
/* ul li:nth-child(5) {
background-color: red;
} */
/* 4、选择ul里面所有偶数行的li */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 5、公式 从0开始 每次加一 往后计算 这里必须是n 不能是其他字母
相当于选择了所有的孩子*/
ol li:nth-child(-n+5) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
3、伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素
- 语法：
element::before{} - before和after必须有content属性，否则伪元素选择器不起作用
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
div::before {
display: inline-block;
/* 这个content是必须要写的 否则伪元素选择器不起作用 */
content: '我';
width: 20px;
height: 20px;
background-color: purple;
}
div::after {
content: 'pig';
}
(1)使用场景1：配合字体图标
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '';
color: green;
font-size: 18px;
}
(2)使用场景2：仿土豆效果
修改之前的土豆网案例，将之前使用盒子来实现遮罩层的写法改为用伪元素选择器来进行实现。
/* 当鼠标经过 土豆这个盒子 就让里面的before遮罩层显示出来 */
.tudou:hover::before {
display: block;
}
(3)使用场景3：伪元素清除浮动
-
额外标签法也称为隔墙法，是W3C推荐的做法
-
父级添加overflow属性
-
父级添加after伪元素
.clearfix::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } -
父级添加双伪元素
.clearfix::before,.clearfix::after { content: ''; display: table; /*转换为块级元素并一行显示*/ } .clearfix::after { clear: both; }
4、伪类和伪元素的区别
引入伪类和伪元素是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
伪类和伪元素的根本区别在于：他们是否创建了新的元素。
-
伪类：用于向某些选择器添加特殊的效果
存在DOM文档中，逻辑上存在但在文档树中却无需标识的"幽灵分类"
-
伪元素：用于将特殊的效果添加到某些选择器
不存在于DOM文档中，是创建了虚拟的新元素。代表着某个元素的子元素，该子元素逻辑上存在，但并不实际存在于文档树中。
二十六、CSS3 盒子模型
CSS3可以通过box-sizing来指定盒模型，有两个值：即可指定content-box border-box，这样我们计算盒子大小的方式就发生了改变。
可以分为两种情况：
-
box-sizing: content-box盒子大小为width+padding+border(以前默认的) -
box-sizing: border-box盒子大小为width也就是说，如果我们将box-sizing设置为border-box，那么padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度)
二十七、CSS3 图片模糊处理
CSS3滤镜filter：filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如：filter:blur(5px); blur模糊处理 数值越大越模糊
二十八、CSS3 宽度calc函数
CSS3 calc()函数：在声明CSS属性值时执行一些计算。
width: calc(100% - 30px); 括号里面可以使用+-*/来进行计算。
二十九、CSS3 过渡(重点)
过渡(transition)是CSS3中具有颠覆性的特征之一，可以在不使用Flash动画或者JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态 渐渐地过渡到另外一个状态，可以让页面更好看，动感十足，虽然低版本浏览器不支持(ie9以下版本) 但并不会影响页面布局。
经常和:hover一起搭配使用。
语法：
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的CSS属性，宽度高度、背景颜色、内外边框都可以，如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间：单位是秒(必须写单位)比如0.5s
- 运动曲线：默认是ease(可以省略)
- 何时开始：单位是秒(必须写单位)可以设置延迟触发时间 默认是0s(可以省略)
"谁做过渡给谁加 transition"
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition 谁做过渡给谁加 */
/* transition: 变化属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s; */
/* 如果想写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all既可以 */
transition: all .5s;
}
div:hover {
width: 400px;
height: 300px;
background-color: skyblue;
}
</style>
Demo CSS3过渡练习
.bar_in {
width: 50%;
height: 100%;
background-color: red;
border-radius: 7px;
transition: width .5s;
}
/* hover前面是鼠标经过的盒子 hover后是鼠标经过时需要变化的盒子 */
.bar:hover .bar_in {
width: 100%;
}
三十、CSS3 2D转换
转换transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
可以简单理解为变形。
- 移动：translate
- 旋转：rotate
- 缩放：scale
2D转换是改变标签在二维平面上的位置和形状的一种技术。
-----------------> x轴
|
|
y轴
1、移动 translate
可以改变元素在页面中的位置。类似定位。
(1)语法
transform: translate(100px, 100px);
/* 如果只移动x坐标 */
transform: translate(100px, 0);
transform: translateX(100px);
transform: translateY(100px);
(2)重点
-
定义2D转换中的移动，沿着X和Y轴移动元素
-
translate最大优点：不会影响其他元素位置
-
translate中的百分比单位是相对于自身元素的translate(50%, 50%)
实现盒子水平垂直居中，可以使用该方法了
p { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: purple; /* margin-top: -100px; margin-left: -100px; */ transform: translate(-50%, -50%); }直接使用translate中的百分比移动，这样不需要像使用margin时还需要计算具体的数值。
-
对行内标签没有效果
2、旋转 rotate
让元素在2D平面中顺时针或逆时针旋转
(1)语法
transform: rotate(360deg);
(2)重点
- rotate里面跟度数，单位是deg
- 度数为正时，顺时针；负时，逆时针
- 默认旋转的中心点是元素的中心点
旋转小头像：
img {
width: 100px;
/* transform: rotate(45deg); */
border-radius: 50%;
border: 3px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
(3)CSS3 三角DEMO
之前做’>'这种箭头效果，使用字体图标。现在还可以利用rotate来实现。
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
也可以再添加动画效果：鼠标经过，则箭头旋转。并添加了过渡效果，让动画更好看。
div::after {
content: '';
position: absolute;
top: 10px;
right: 15px;
width: 7px;
height: 7px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过，里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
3、设置转换中心点transform-origin
(1)语法
transition: all 0.5s;
/* 1.可以跟方位名词 */
transform-origin: left bottom;
/* 2.默认 50% 50% 等价于center center */
/* 3.可以是px 像素 */
transform-origin: 50px 50px;
(2)重点
- 参数使用空格隔开
- x y默认转换的中心点是元素的中心点 (50% 50%)
- 还可以给x y设置像素或者范围名词(top bottom left right center)
(3)旋转中心点demo
div {
/* 溢出隐藏 */
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::after {
content: '黑马';
/* after伪元素是行内元素 所以需要转换为块级元素再设置高度和宽度 */
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
div:hover::after {
transform: rotate(0);
}
- 给div父盒子设置overflow:hidden; 溢出隐藏。
- after伪元素是行内元素，需要先转换为块级元素后再设置高度和宽度(或者使用绝对定位)
4、缩放 scale
(1)语法
/* 里面的参数表示倍数 */
transform: scale(1.5, 1.5);
/* 只修改其中的高度 */
transform: scale(1, 2);
/* 等比例缩放 可以简写为以下形式 */
transform: scale(2);
/* 缩小 */
transform: scale(0.5);
(2)注意点
- 参数使用’,'分隔
- 优势：不影响其他盒子，还可以设置缩放的中心点
(3)图片放大demo
div {
/* 溢出隐藏 */
overflow: hidden;
float: left;
margin: 10px;
}
div img {
/* 注意过渡效果不是加在div身上，而应该加在img身上 */
/* 谁做过渡，给谁加 */
transition: all 0.2s;
}
div img:hover {
transform: scale(1.1);
}
-
注意这里的过渡效果不要加在div上，而应该加在img上
“谁做过渡给谁加”
(4)分页按钮demo
li {
overflow: hidden;
float: left;
list-style: none;
width: 30px;
height: 30px;
border: 2px solid greenyellow;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin: 10px;
transition: all 0.2s;
}
li:hover {
transform: scale(1.3);
}
5、2D 转换的综合写法
- 同时使用多个转换，其格式为：
transform:translate() rotate() scale()...等 - 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
三十一、CSS3 动画
动画(animation)是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个 或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
1、基本使用
制作动画分为两步：
- 先定义动画
@keyframes 动画序列来定义动画 - 再使用(调用)动画
调用动画时 写清楚动画名称 animation-name 以及 持续时间animation-duration
/* 1.使用keyframes定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
(1)动画序列
-
使用from to可以实现和0% 100%相同的效果
-
想要实现多个状态的变化 则将百分比进行划分
百分比其实就是时间的划分
/* from 和 to 等价于 0% 和 100% */
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
/* 可以做多个状态的变化 keyframe 关键帧 */
/* 里面的百分比就是时间的划分 */
@keyframes move {
/* 该初始状态没动，也可以省略 */
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
(2)常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称(必须) |
| animation-duration | 规定动画完成一个周期所花费的秒或者毫秒，默认是0(必须) |
| animation-timing-function | 规定动画的速度曲线，默认是"ease" |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是"normal"，逆播放"alternate" |
| animation-play-state | 规定动画是否正在运行或暂停，默认是"running"，暂停"paused" |
| animation-fill-mode | 规定动画结束后状态，回到起始backwards；停在结束位置forwords |
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 播放次数 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放 */
/* animation-direction: alternate; */
/* 动画结束时 停下的位置 */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 让div暂停动画 鼠标离开继续动画 */
animation-play-state: paused;
}
动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束的状态
animation: move 2s linear 0s 2 alternate forwards; 这里linear是运动曲线，表示匀速运动。
- 简写属性中前两个必须写：动画名字和持续时间
- 简写属性中不包含animation-play-state
- 暂停动画：animation-play-state: paused;经常与鼠标经过等配合使用
(3)大数据热点图demo
这里主要写一下实现细节。
-
map盒子，背景设置为地图的图片
-
map盒子中放city盒子，里面由一个小圆点和三个发散的小波纹组成(4个盒子)
-
小波纹盒子通过设置阴影(而不是给边框)，让效果更好看；
-
给小波纹盒子添加动画时，为了更自然，可以让前70%的动画放大一部分，透明度设置为不透明opacity: 1;让后30%的动画再放大一部分，透明度设置为0(透明)。而且不使用transform: scale();来实现放大，因为这样会放大阴影，不好看；而是直接放大宽和高，阴影不变。
/* 属性选择器 选择出city下面所有以palse开头的div */ .city div[class^="pulse"] { /* 保证小波纹在父盒子中水平垂直居中 */ position: absolute; /*三个波纹盒子叠在一起*/ top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pulse 1.2s linear infinite; }注意这里使用属性选择器，选出pulse1，pulse2，pulse3；
使用绝对定位，让盒子实现水平垂直居中。
-
不同的城市，可以利用层叠性，定位到不同的位置
.city { position: absolute; top: 227px; right: 193px; color: #fff; } /* 会层叠掉city中的定位值 */ .tb { top: 499px; right: 78px; } <div class="city tb"></div> /*该盒子同时具有city和tb两个样式*/
(4)速度曲线细节
animation-timing-function: 规定动画的速度曲线，默认是"ease"
| 值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 默认，以低速开始，然后加快，在结束前变慢 |
| ease-in | 以低速开始 |
| ease-out | 以低速结束 |
| ease-in-out | 以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量(步长) |
steps()可以控制该动画分几步完成。
div {
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让文字强制一行显示 */
white-space: nowrap;
overflow: hidden;
/* steps() 分几步完成 */
animation: w 4s steps(10) forwards;
}
这里模拟打字机效果。
(5)奔跑的北极熊demo
这里小熊的图片是png格式，并不是想象中的动图的格式。使用的是，人眼的"暂留效果"，让图片循环向左移动，且使用到的是steps来控制动画分几步完成。
/* 同一元素可以添加多个动画 使用','进行分隔' */
animation: bear 1s steps(8) infinite, move 3s forwards;
这里给小熊添加了两个动画，一个是奔跑的；一个是跑到中间位置就固定在中间继续奔跑的。同一元素添加多个动画的话，使用’,'进行分隔。
- 奔跑的动画，要注意图片是往左走的，所以最后的定位是负值
- 定位到中间的动画，起始是在最左侧；最后是水平居中，注意这里的写法，先绝对定位到父盒子的中间位置，再水平向左移动自身宽度的50%。
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
/* 注意这里是负值，因为图片是往左走的 */
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
三十二、CSS3 3D转换
3D特点：
- 近大远小
- 物体后面遮挡不可见
在网页上构建3D效果的时候参考这些特点就能产出3D效果。
1、三维坐标系
三维坐标系其实就是指立体空间，立体空间是3个轴共同组成的。
- x轴：水平向右 x右边为正值，左边为负值
- y轴：垂直向下 y下边是正值，上边是负值
- z轴：垂直屏幕向外 z往外是正值，往里是负值
2、3D移动 translate3d
3D移动在2D移动的基础上多了一个z轴的移动。
translateZ() 注意：一般使用px作为单位
transform: translateX(100px) translateY(100px) translateZ(100px);
简写：transform: translate3d(100px, 100px, 100px); 使用’,'进行分隔。
3、透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视也称为视距：也就是人眼到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子中
body {
/* 透视写到被观察元素的父盒子中 */
perspective: 500px;
}
还是“近大远小”
- d：就是视距，视距就是人眼到屏幕的距离；d越小，也就是人眼离屏幕越近，所以看到的物体越大
- z：就是z轴，物体与屏幕的距离，z值越大，物体离屏幕越远，也就是物体离人眼越近，所以看到的物体就越大
4、3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
(1)rotateX(45deg)
transform: rotateX(45deg);
(2)rotateY(45deg)
transform: rotateY(45deg);
(3)rotateZ(45deg)
transform: rotateZ(45deg);
对于元素旋转的方向的判断，使用左手准则
- 左手拇指指向x/y/z轴正方向
- 四个手指指向沿着x/y/z轴旋转的正方向
(4)rotate3d(x,y,z,deg) 了解即可
沿着自定义轴旋转，xyz是表示旋转轴的矢量，是标示我们希望元素沿着旋转的轴线。
transform: rotate3d(7, 1, 1, 45deg);
5、3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat; 默认值是flat，子元素不开启3d立体空间
- transform-style: preserve-3d; 子盒子开启立体空间(保持3d)
- 代码是写给父级的，但影响的是子盒子
- 这个属性非常非常重要！
6、案例
(1)两面翻转的盒子demo
其实是box盒子里面有两个子盒子front和back，鼠标经过时，翻转box盒子。
-
开始的时候，让两个盒子背对背，才能实现翻转显示反面的效果
.back { background-color: purple; /* 让两个子盒子初始时，背靠背 */ transform: rotateY(180deg); } -
一定一定要注意！记得添加3d呈现效果(保持子盒子的3d属性)
transform-style: preserve-3d;要加在父盒子里面哦！ -
还可以添加透视，增加立体效果
perspective: 400px;
(2)3D导航栏demo
基本架构和上面的案例相似，都是box盒子里面包着两个子盒子front和bottom，鼠标经过时，旋转90度，漏出下面的bottom盒子。只不过这里有好几个box盒子，所以使用ul和li进行包裹。
-
对于bottom盒子
.bottom { background-color: purple; /* 为了保证盒子翻转上来，所以先让其向前扑倒(脸朝下) */ /* 如果既有平移又有旋转，一定要先写平移 否则坐标轴的方向就改变了 */ transform: translateY(50%) rotateX(-90deg); }为了让其翻转上来，所以先向前扑倒；此时bottom处于front盒子中间位置。
所以要将bottom盒子移动到front盒子的底部。
但一定要注意：如果元素既有移动又有旋转的话，要先写移动(因为旋转会改变坐标轴的方向)
-
对于front盒子
让front盒子往屏幕外走自身宽度的一半，以实现和bottom盒子构成一个类似立方体的形状，然后绕着中心点进行旋转。
transform: translateZ(50%); -
依然是不要忘记加3d呈现
transform-style: perserve-3d;和 透视效果
(3)旋转木马demo
基础架构，section里面包含6个div盒子。
-
写完基础架构之后，6个div盒子是叠在一起的。我们需要将其拆开。
第一个盒子比较简单，就是先屏幕外移动一定的距离，也就是translateZ(1500px)。当然也可以看做旋转了0度
section div:nth-child(2) { /* 这里比较特殊 是先旋转再移动的 因为移动是都是向屏幕外移动的 */ transform: rotateY(60deg) translateZ(1500px); }这里主要以第二个盒子为例，就是先将该盒子沿y轴正方向旋转60度(因为一共6张照片)，再将该盒子向屏幕外移动一定的距离。注意这里是先旋转，后移动，因为是沿着y旋转，沿着z移动，没有什么关联
-
给section盒子添加动画效果
@keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } animation: rotate 6s linear infinite;鼠标经过时，让动画停止播放。
section:hover { /* 鼠标放上 动画暂停 */ animation-play-state: paused; } -
最后依然是不要忘记加透视和3d呈现。
三十三、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
1、私有前缀
- -moz-：代表Firefox浏览器私有属性
- -ms-：代表IE浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
2、推荐写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 1
扫一扫
8432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
