过渡 transition
让属性变化成为一个持续一段时间的过程，而不是立即生效的
不支持数值到auto
- 可能的属性：
执行变换的属性： transition-property,
变换延续的时间： transition-duration,
在延续时间段，变换的速率变化 transition-timing-function,
linear： 匀速
ease：（默认值） 慢快慢
easein： 慢入
easeout： 慢出
easeinout： 慢入慢出
cubic-bezier(.17,.67,.83,.67)
贝塞尔曲线（ x1, y1, x2, y2 ）
变换延迟时间 transition-delay。
而我们通常会用简写方式：
transition:width 2s, height 2s, background-color 2s, transform 2s;
多个属性过渡的时候 用逗号隔开！
display不支持过渡
动画 animation
可以为从一个CSS样式配置到另一个CSS样式配置的动画制作动画。动画包含两个组件，一个描述CSS动画的样式和一组指示动画样式的开始和结束状态的关键帧，以及可能的中间路标。
- 可能的值：
animationname 动画名称
animationduration 持续时间
animationdelay 延迟时间
animationtimingfunction 运动曲线
animationiterationcount 规定动画播放次数！
infinite无限重复 或者number
animationdirection 规定轮流反向播放动画！
normal： （默认） 正常方向
reverse： 反方向运行
alternate ： 动画先正后反方向运行
alternatereverse： 先反后正方向
animation: name duration timing-function delay iteration-count direction;
animation-name动画名称
div{
/*动画：动画名称 动画持续时间*/
animation: move 2s;
}
规定动画如何运动，绑定动画，注意写法：
@keyframes move{
from{width:100px;backrgound:red;}
to{width:500px;background:blue;}
/*0%{} 100%{}*/
}
animation-play-state: 动画执行状态
paused 暂停动画
running 运行动画
animation-fill-mode: 规定动画的第一帧和最后一帧的状态！通俗的讲就是动画结束之后保持什么状态
none （默认） 原始状态>动画>原始状态
forwards 原始状态>动画>停在动画帧100%
backwards (忽略原始状态)进入动画帧0%>动画>原始状态
both (忽略原始状态)进入动画帧0%>动画>停在动画帧100%
行内元素不会继承animation-fill-mode;
行内元素可以继承animation-fill-mode;
变换
属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）
1.旋转rotate
一个值代表X方向的值
rotate:会占据原来的位置
这里面的值可以是（角度deg）（圈turn）（弧度rad）（梯度grad） 只是占据自己的位置，不会影响其他元素的位置
div{
transform:rotate();
}
默认情况下所有元素都是围绕Z轴进行旋转
transform:rotateX(deg);
transform:rotateY(deg);
transform:rotateZ(deg);
2. 变换焦点 transform-origin
具体的值
百分比值
left / top / right / bottom / center
div{
/*这里要注意的是：不要写在hover样式里面，而是本身元素里面。默
认是中心点 用空格隔开
*/
transform-origin:x y;
}
3.缩放 scale
scale
负值会反方向的放大
scale:会占据原来的位置
放大和缩小的倍数 不支持负值！
div{
transform:scale(1.2);
}
位移 translate
transform:translate(x,y);
会占据原来的位置
div{
/*两个值写法 中间用逗号隔开*/
transform:translate(X,Y);
/*一个值写法*/
transform:translateX();
transform:translateY();
}
5.倾斜
不同于旋转，可以用度数，弧度 角度 梯度控制 ，当到一个临界点的时候会消失不见
div{
transform:skew(30deg,30deg);
}
6.复合写法
transform 不同的值用空格隔开 括号里面用逗号隔开
复合写法中。应该把translate写在最前面
div{
transform:translate(50px,50px) scale(1.2);
}
-
总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
旋转轴向.jpg
坐标系.png
什么是透视
近大远小
-
近大远小.jpg
注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面 - perspective: 500px; 数值越大看的事物越符合从远处观看的效果！
浏览器支持
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性
允许调整大小
注意：必须要添加overflow:;属性 因为overflow重新检测盒子里面的内容
overflow值可以是：
默认visible
hidden 隐藏
auto 根据内容决定是否滚动条
scroll 滚动条
resize:
none 默认
horizontal 水平可以缩放
vertical 垂直可以缩放
both 垂直水平都能缩放
计算calc()
calc()，你就可以通过计算来决定一个CSS属性的值,可以用在任何长度,数值,时间,角度,频率
等处。
可以使用 + - * / 四则运算 也可以加括号
运算符号前后必须要有空格
在实际的开发中需要加上兼容性前缀，前缀加在 calc 前面
而真正在计算的时候 我们要把所有的距离都考虑进去 如：边框 内边距 等…
div{
width:-webkit-calc(100% - （100px - 50px）);
width:-moz-calc(100% - (25px * 2));
}
3D转换模块！
- 什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
- 默认情况下所有的元素都是呈2D展现的
- 如何让某个元素呈3D展现
- 和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
3 .只要父元素被拉伸了,子元素也会被拉伸
-
坐标轴旋转图
image.png
-
1的数字
4d5c05110a7964b3b94917fc5b9a687.png
-
2的数字
544f516a986036ab1c9d14a96e6bd0c.png
-
3的数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } ul{ position:relative; margin:100px auto; width:300px; height:300px; border:1px solid #000; transform-style:preserve-3d; transform:rotateX(0deg) rotateY(0deg); } ul li{ position:absolute; top:0; left:0; list-style:none; width: 300px; height: 300px; font-size:60px; text-align:center; line-height:300px; } ul li:nth-child(1){ background-color:red; transform:rotateX(90deg) translateZ(150px); } ul li:nth-child(2){ background-color:#01b7f5; transform:rotateX(180deg) translateZ(150px); } ul li:nth-child(3){ background-color:green; transform:rotateX(270deg) translateZ(150px); } ul li:nth-child(4){ background-color:#ccc; transform:rotateX(360deg) translateZ(150px); } ul li:nth-child(5){ background-color:#666; transform:translateX(-150px) rotateY(deg); } ul li:nth-child(6){ background-color:pink; transform:translateX(-150px) rotateY(deg); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <!--<li>5</li>--> <!--<li>6</li>--> </ul> </body> </html>
注意点:
- 1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
- 2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
网友评论