过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起搭配使用。
transition-property
定义过渡的属性
只有在该属性中定义的属性（比如宽、高、颜色等）才会以动画的形式持续一段时间而不是瞬间变化。
-
none，不过渡任何属性。
-
all，过渡所有的属性。
一般来说属性能够使用数字值的一般都支持过渡，不能转换为数值的关键字不支持过渡。
-
其他值的列表，以逗号分隔的属性的列表。
可以被过渡的属性有
颜色属性 具有长度值 百分比的属性 值是数字的属性 如 z-index opacity outline-offset等 变形系列属性 阴影 渐变
transition-duration
设置过渡的持续时间
指定一个状态过渡到另外一个状态要经过多久。
-
默认值是0，即没有过渡时间。
-
值可以是s或ms，只能是正数，一般来说较好的体验值是
100~200ms。 -
值可以逗号分隔的时间长度列表。
-
如果想让列表中的所有属性都持续一个时间那就写一个值。
-
如果想让每个属性都持续不同的时间那就写一个时间的列表。
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>15_过渡-属性介绍</title>
<style>
.box{
width: 300px;
height: 100px;
background-color: aqua;
/* 指定过渡的属性 transition-property (1)固定属性 （2）all */
transition-property: width,height;
/* 过渡的时间 */
transition-duration: 2s;
/* 延迟过渡 */
/* transition-delay: 3s; */
/* 过渡的动画类型 */
transition-timing-function: cubic-bezier(.17,2,1,.85);
}
.box:hover{
width: 800px;
height: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>transition-delay
transition-delay属性指的是开始过渡的延迟。
格式：
transition-delay:value;
值：和transition-duration的规则相同。
transition-timing-function
设置对象中过渡的动画类型
-
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
-
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
-
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
-
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
-
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
-
cubic-bezier( number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间
-
step-start： 等同于 steps(1, start)
-
step-end： 等同于 steps(1, end)
-
steps( integer [, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
在线制作贝塞尔曲线： cubic-bezier.com
CSS3触发过渡的条件
-
伪类触发
-
媒体查询
-
JavaScript触发
动画
动画可以设置变化的次数甚至是无数次，过渡只能看到一次变化过程 如宽度 1000px 变化到 100px，过渡通常需要配合hover使用，而动画不需要，可以自动执行。
CSS动画与过渡的相同点就是CSS属性的值在一段时间内发生变化，不同点是动画对变化的方式有更大的控制权（如何重复，重复多少次）。
关键帧
众所周知，一段动画，从本质上讲就是一段时间内连续播放的一定数量的画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。
关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的2-3帧。
动画语法
基本使用
在css中定义动画函数
@keyframes 动画名{
}
关键帧的作用用来设置“由这个状态变成那个状态”。
@keyframes keyName{
0%{
property1:value1;
}
...
100%{
property2:value2;
}
}
0%、100%表示动画播放到0%和100%的时候分别希望某个元素的属性值是什么。
50%，表示动画持续时间执行到50%的时候的值。
目标元素调用动画函数
-
格式：
animation-name:value-
none，没有规则名称（默认），没有动画效果。
-
规则名，使用
@keyframes定义的动画名。
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 创建关键帧 */
@keyframes testKey {
from {
}
to {
transform: translateX(600px)
}
}
@keyframes testKey2 {
0% {
background-color: red;
}
20% {
background-color: orange;
}
40% {
background-color: green;
}
60% {
background-color: pink;
}
80% {
background-color: cyan;
}
100% {
background-color: purple;
}
}
.wrapper {
height: 100px;
width: 700px;
border: 2px dashed red;
}
.box {
width: 100px;
height: 100px;
background-color: cyan;
/* 设置动画 */
animation-name: testKey,testKey2;
/* 设置动画所需的时间 */
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>相关属性
-
animation-name 指定关键帧的名字，多个关键字用逗号隔开。
-
animation-duration 指定动画的执行时间，单位是 s。
-
animation-delay 指定对象动画的延迟时间
-
animation-iteration-count 指定动画的具体循环次数
-
number:动画循环次数
-
infinite： 无限循环
-
-
animation-direction 设置对象动画在循环中是否反向运动
-
normal： 正常方向 (默认)
-
reverse： 反方向运行
-
alternate： 动画先正常运行再反方向运行，并持续交替运行
-
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
-
-
animation-fill-mode 设置对象动画时间之外的状态
-
none： 默认值。不设置对象动画之外的状态
-
forwards： 设置对象状态为动画结束时的状态
-
backwards： 设置对象状态为动画开始时的状态
-
both： 设置对象状态为动画结束或开始的状态
-
-
animation-play-state 设置对象动画的状态
-
running： 运动 (默认)
-
paused： 暂停
-
-
animation 复合属性，设置多个值
如果只设置一个时间表示 duration，设置了两个时间分别是 duration 和 delay。其他子属性的值没有数量和顺序要求
多列布局
实现类似于报纸的布局方式
相关属性
-
column-count 设置列数
-
auto： 根据
column-width自定分配宽度 -
number： 用整数值来定义列数。不允许负值
-
-
column-width 设置每列的宽度（类似于最小宽度）
-
auto： 根据
column-count> 自定分配宽度 -
length： 用长度值来定义列宽。不允许负值
-
-
columns 设置的列数和每列的宽度。复合属性
-
columns：<' column-width '> || <' column-count '>
-
观察结果
-
-
column-gap 设置列与列之间的间隙
-
normal： 与
font-size大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 -
length ： 用长度值来定义列与列之间的间隙。不允许负值 。
-
-
column-rule-width 列与列之间的边框厚度
-
length： 用长度值来定义边框的厚度。不允许负值
-
medium： 定义默认厚度的边框。
-
thin： 定义比默认厚度细的边框。
-
thick： 定义比默认厚度粗的边框。
-
-
column-rule-style 列与列之间的边框样式
-
none： 无轮廓。
column-rule-color与column-rule-width将被忽略 -
hidden： 隐藏边框。
-
dotted： 点状轮廓。
-
dashed： 虚线轮廓。
-
solid： 实线轮廓
-
double： 双线轮廓。
-
groove： 3D凹槽轮廓。
-
ridge： 3D凸槽轮廓。
-
inset： 3D凹边轮廓。
-
outset： 3D凸边轮廓。
-
-
column-rule-color 列与列之间的边框颜色
-
column-rule: 1px dashed #ccc;（边框的像素值不会影响排列布局的变化，也不会占位置）
-
column-span 对象元素是否横跨所有列
-
none： 不跨列 (默认)
-
all： 横跨所有列
-
一般用于标题
-
-
column-break-before 对象之前是否断行
-
auto： 既不强迫也不禁止在元素之前断行并产生新列 (默认)
-
always： 总是在元素之前断行并产生新列
-
avoid： 避免在元素之前断行并产生新列
-
添加私有前缀
-
-
column-break-after 对象之后是否断行
-
auto： 既不强迫也不禁止在元素之后断行并产生新列 (默认)
-
always： 总是在元素之后断行并产生新列
-
avoid： 避免在元素之后断行并产生新列
-
添加私有前缀
-
-
column-break-inside 对象内部是否断行
-
auto： 既不强迫也不禁止在元素内部断行并产生新列 (默认)
-
avoid： 避免在元素内部断行并产生新列
-
案例：
文本多列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.article {
margin: 40px auto;
width: 1000px;
border: 1px solid #999;
padding: 20px;
/* 设置显示为多列 */
/* column-count: 3; */
/*指定列宽*/
/* column-width: 450px; */
/* 复合属性 */
/* columns: 5 250px; */
columns: 3;
/* 设置列间距 */
column-gap: 20px;
/* 列边框 */
/* column-rule-width: 1px;
column-rule-style: dashed;
column-rule-color: #ccc; */
column-rule: 1px dashed #ccc;
}
.article p {
text-indent: 2em;
}
.article p:nth-of-type(2) {
/* -webkit-column-break-before: always;
-webkit-column-break-after: always; */
/*
-webkit-column-break-inside: avoid; */
}
.article h1 {
column-span: all;
text-align: center;
}
.article img {
width: 100%;
}
</style>
</head>
<body>
<div class="article">
<h1>一人我饮酒醉</h1>
<p>
嫦娥五号任务的成功再次印证了一个事实：关键核心技术是要不来、买不来、讨不来的，简单重复走别人的路，永远只能跟在别人的后面仰人鼻息。中国探月工程起步伊始，就选择了一条具有自身特色的月球探测活动路径，不盲从、不攀比，而是根据自己的国情需要和国家实力，制定了探月的中国方案，每个阶段、每个时期的计划和任务都是一步一个脚印地扎实推进，为下一步发展积累宝贵经验。每一个大胆设想、每一次成功实施，都彰显出科技创新水平，标注了科技创新高度，展现出中国科技工作者团结一心、勇于探索、敢于创新的精神力量。
</p>
<p>
嫦娥五号任务的成功再次印证了一个事实：关键核心技术是要不来、买不来、讨不来的，简单重复走别人的路，永远只能跟在别人的后面仰人鼻息。中国探月工程起步伊始，就选择了一条具有自身特色的月球探测活动路径，不盲从、不攀比，而是根据自己的国情需要和国家实力，制定了探月的中国方案，每个阶段、每个时期的计划和任务都是一步一个脚印地扎实推进，为下一步发展积累宝贵经验。每一个大胆设想、每一次成功实施，都彰显出科技创新水平，标注了科技创新高度，展现出中国科技工作者团结一心、勇于探索、敢于创新的精神力量。
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eligendi, porro magni exercitationem totam, aut iure voluptatum commodi officia cum nesciunt quis dolores ullam necessitatibus laborum eaque harum. Laboriosam, necessitatibus?
</p>
<img src="images/bg01.jpg" alt="通缉">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ea, omnis, illum nesciunt aliquid distinctio autem unde necessitatibus nisi expedita quasi obcaecati consequuntur, pariatur dolore labore laboriosam laudantium alias enim!
</p>
<p>
嫦娥五号任务的成功再次印证了一个事实：关键核心技术是要不来、买不来、讨不来的，简单重复走别人的路，永远只能跟在别人的后面仰人鼻息。中国探月工程起步伊始，就选择了一条具有自身特色的月球探测活动路径，不盲从、不攀比，而是根据自己的国情需要和国家实力，制定了探月的中国方案，每个阶段、每个时期的计划和任务都是一步一个脚印地扎实推进，为下一步发展积累宝贵经验。每一个大胆设想、每一次成功实施，都彰显出科技创新水平，标注了科技创新高度，展现出中国科技工作者团结一心、勇于探索、敢于创新的精神力量。
嫦娥五号任务的成功再次印证了一个事实：关键核心技术是要不来、买不来、讨不来的，简单重复走别人的路，永远只能跟在别人的后面仰人鼻息。中国探月工程起步伊始，就选择了一条具有自身特色的月球探测活动路径，不盲从、不攀比，而是根据自己的国情需要和国家实力，制定了探月的中国方案，每个阶段、每个时期的计划和任务都是一步一个脚印地扎实推进，为下一步发展积累宝贵经验。每一个大胆设想、每一次成功实施，都彰显出科技创新水平，标注了科技创新高度，展现出中国科技工作者团结一心、勇于探索、敢于创新的精神力量。
</p>
<p>
嫦娥五号任务的成功再次印证了一个事实：关键核心技术是要不来、买不来、讨不来的，简单重复走别人的路，永远只能跟在别人的后面仰人鼻息。中国探月工程起步伊始，就选择了一条具有自身特色的月球探测活动路径，不盲从、不攀比，而是根据自己的国情需要和国家实力，制定了探月的中国方案，每个阶段、每个时期的计划和任务都是一步一个脚印地扎实推进，为下一步发展积累宝贵经验。每一个大胆设想、每一次成功实施，都彰显出科技创新水平，标注了科技创新高度，展现出中国科技工作者团结一心、勇于探索、敢于创新的精神力量。
</p>
</div>
</body>
</html>图片多列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style>
.box{
columns: 5;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<img src="img/11.jpg" alt="">
<img src="img/12.jpg" alt="">
</div>
</body>
</html> 
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
