1.CSS3转换 transform
概念：CSS3 转换是使元素改变形状、尺寸和位置的一种效果。
特点：
-
transfrom不会影响其他元素的位置
-
transfrom对内联元素（inline）没有效果
2D转换
2D转换表现在平面上，主要方法有：
-
translate() 平移：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div {
transform: translateX(50px);
transform: translateY(100px);
transform: translate(50px,100px);
}translate中的百分比单位是相对于自身元素的
transform: translate(50%,50%);
-
rotate() 旋转：在一个给定度数顺时针旋转的元素 允许负值即元素逆时针旋转 需带单位deg
div {
transform: rotateX(30deg); /* 沿着X轴 从右往左看 顺时针旋转一定角度 3d */
transform: rotateY(30deg); /* 沿着Y轴 从下往上看 顺时针旋转一定角度 3d */
/* 沿着Z轴 顺时针旋转 2d 以方框中心为原点，顺时针旋转 */
transform: rotate(30deg); 与 transform: rotateZ(30deg) 一样
}-
scale() 缩放：放大缩小 大小取决于宽度（X轴）和高度（Y轴）的参数
正数表示放大，小数表示缩小 以中心点进行缩放
div {
transform: scaleX(2)
transform: scaleY(0.5);
/* transform: scaleZ(0.5); /* 3d效果 */
transform: scale(2,3); /* 标准语法 */
}-
skew() 倾斜：包含两个参数值即X轴Y轴倾斜的角度
若第二个参数为空则默认为0 参数为负表示向相反方向倾斜
skewX(<angle>);表示只在X轴(水平方向)倾斜
skewY(<angle>);表示只在Y轴(垂直方向)倾斜
div {
transform: skewX(10deg);
transform: skewY(10deg);
transform: skew(30deg,20deg);
}3D转换
想要看到立体效果就需要加上透视
透视perspective ：
- 透视也称为视距，视距就是眼睛到屏幕的距离
- 距离视觉点较近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素px
- 透视写在被观察元素的父元素上
rotateX(80deg)：正值向上翻转
rotateY(180deg)：正值向右翻转
translateZ(100px)：正值向前，负值向后 透视原理： 近大远小
实例：
<div class="box">
<div class="son">1111</div>
</div>
<style>
.box {
width: 500px;
height: 500px;
border: 2px solid #000;
margin: 0 auto;
perspective: 200px;
}
.son1 {
width: 200px;
height: 200px;
background-color: red;
margin: 100px 0 0 100px;
}
.box:hover .son {
transition: 2s;
/* transform: rotateX(80deg); */
/* transform: rotateY(80deg); */
transform: translateZ(100px);
}
</style>2.CSS3过渡 transition
概念：元素从一种样式逐渐改变为另一种的效果
语法：
transition:要过渡的属性 花费时间 运动曲线 何时开始-
属性（必须）：想要变化的css属性，宽度高度，背景颜色，转换，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
-
花费时间（必须）：单位是秒（必须写单位）
-
运动曲线：单位是ease（可以省略）
-
何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
-
多项改变：要添加多个样式的变换效果，添加的属性由逗号分隔
div {
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}过渡的属性：
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间 默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线 默认是 "ease" |
| transition-delay | 规定过渡效果何时开始 默认是 0 |
transition-timing-function属性值
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
transition 属性简写
transition: property duration timing-function delay
div {
transition: width 1s linear 2s;
}3.CSS3动画 animation
概念：
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
- 用百分比来规定变化发生的时间：0% 是动画的开始 100% 是动画的完成
- 用关键词 "from" 和 "to" 等同于 0% 和 100%
语法：
/* animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动 */
animation: onemove 5s ease-in-out 2s 3 alternate;1.百分比：
实例：
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color:pink;
animation: myani1 10s linear;
}
@keyframes myani1 {
0%{
transform: translate(0, 0);
}
25%{
transform: translate(100px, 0);
}
50%{
transform: translate(100px, 100px);
}
75%{
transform: translate(0, 100px);
}
100%{
transform: translate(0, 0);
}
}2.关键字：
语法：
@keyframes mymove{
from{}
to{}
}实例：
div {
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
position:absolute;
left: 0px;
top:0px;
}
/*@keyframes是关键字不能更改 mymove是自定义的变量名*/
@keyframes mymove{
from{
left: 0px;
}
to{
left:100px;
}
}动画运动 transition-timing-function属性值
动画延迟 animation-delay
/* animation-delay 属性定义动画什么时候开始
延迟2s,只有第一次会延迟 */
animation-delay:2s;循环次数 animation-iteration-count
/*循环3次 */
animation-iteration-count：3;
/*无限循环 */
animation-iteration-count：infinite;反向运动animation-direction
| 属性 | 描述 |
|---|---|
normal | 每个循环内动画向前循环 即每个动画循环结束时动画重置到起点重新开始 |
reverse | 反向运行动画 每周期结束动画由尾到头运行 动画每次都是从尾部开始运行 |
alternate | 动画交替反向运行 反向运行时 动画按步后退 同时 带时间功能的函数也反向 比如：ease-in 在反向时成为ease-out 计数取决于开始时是奇数迭代还是偶数迭代 即第一次是正向的 第二次是反向的 |
alternate-reverse | 反向交替 动画第一次运行时是反向的 下一次是正向 后面依次循环 决定奇数次或偶数次的计数从1开始 第一次是反向 后面是第二次是正向 |
暂停或停止animation-play-state
- 定义一个动画是否运行或者暂停
- 可以通过查询它来确定动画是否正在运行
- 它的值可以被设置为暂停和恢复的动画的重放
/*运行*/
animation-play-state: running;
/*暂停*/
animation-play-state: paused;4.CSS3多列显示
（1）column-count
说明：
- column-count用于指定某个元素应分为的列数
- 给多列容器指定列数后，在窗口尺寸发生变化时，浏览器会根据列数和容器宽度，自动计算出每列的宽度，以保证按照 3 列进行布局。
取值：
-
数值：将元素的内容以指定的列数显示
-
auto：列数将取决于其他属性，例如："column-width"
（2）column-width
说明：column-width指定列的宽度
取值：
-
length：指定列宽的长度px
-
auto：浏览器将决定列的宽度
注：根据W3C标准，column-width属性值实际上是给浏览器建议的最佳宽度，实际的列宽可以根据容器空间的大小进行调整。调整规则如下：
当容器可用空间足够大时，实际的列宽可能大于所设置的列宽。
当容器的宽度小于设置的列宽时，将以容器的宽度作为列宽
如果同时指定了列数和列宽，则 column-count 表示最大列数，列宽表示每一列最小宽度 如果小于此值 浏览器就会自动计算减少列数，进行列的合并
（3）column-span
说明：
- 指定某个元素应该跨越多少列(只有1和all)
- column-span: 只能对块级（block）标签有效
取值：
-
none：不跨列 默认，如果元素超过当前列宽度，文字将会向下列延伸
-
all：该元素应该跨越所有列
（4）column-gap
说明：指定的列之间的间隙
取值：
-
length：一个指定的长度，将设置列之间的差距
-
normal：指定一个列之间的普通差距。 W3C建议1em值
（5）column-rule
说明：column-rule用于指定列之间的规则：宽度 样式 颜色
语法：
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width：/* 设置列中之间的宽度 */
column-rule-style：/* 设置列中之间的样式 */
column-rule-color：/* 设置列中之间的颜色 */
column-rule: 2px solid red;
-moz-column-rule:4px solid red; /* Firefox */
-webkit-column-rule:4px solid red; /* Safari and Chrome */
/* 注意：IE9以及IE更早版本不支持column-count属性 */（6）columns
说明：简写用来设置列的宽度和列数
语法：
columns: column-width column-count;（7）多列实现div布局
.column {
/* 设置列数 */
-moz-column-count: 4;
/* Firefox */
-webkit-column-count: 4;
/* Safari and Chrome */
column-count: 4;
/* 设置列之间的间距 */
-moz-column-gap: 40px;
/* Firefox */
-webkit-column-gap: 40px;
/* Safari and Chrome */
column-gap: 40px;
/* 设置列之间的规则 */
-moz-column-rule: 4px solid #ff0000;
/* Firefox */
-webkit-column-rule: 4px solid #ff0000;
/* Safari and Chrome */
column-rule: 4px solid #ff0000;
}
.column div{
width: 280px;
height: 100px;
border: 2px solid black;
}
<div class="column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
扫一扫
2688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
