本文详细介绍了CSS中的transition、perspective、transform、box-shadow、text-shadow、animation以及box-sizing和border-radius的用法。重点讨论了过度效果的配置、透视原理、变形操作，包括旋转、平移、缩放和斜切，以及如何创建3D效果。同时，阐述了动画的创建、时间和速度控制，并展示了阴影在元素和文本上的应用。
transition
transition：property duration timing-function delay；
- property：指定哪个属性需要过度（例如 width 、bgc等）
注意：all 一次应用全部属性，但不建议全部属性，因为效率低下且所有样式的过度效果都一样，多个属性可以整体逗号隔开 - duration：过度时间
- timing-function：控制过度动画速度（linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速 steps(n)-可以让过度效果分为指定几次来完成，更多自定义过度速度 cubic-bezier），其中 steps 可以实现打字机效果
- delay：过度效果的延迟
三要素（缺一不可）：
1、元素属性改变（可以hover、active等）
2、指定需要改变的属性
3、改变时间
注意：
1、浏览器兼容
2、属性触发结束，默认会动画回原来的样式
3、无法为一些状态值添加过度效果，例如 display 等
perspective
perspective：mpx；（设置三维透视距离，近大远小）
m大小取决多远看图，如果创建一个200px的立方体盒子，perspective < 100px 则相当于在盒子内部看结果，如果 perspective 非常大，那就是站在非常远的地方看盒子，以为 perspective 指定了观察者于 z = 0 平面的距离使三维位置变换元素产生透视的效果，对动画不应用此值
perspective-origin：水平 垂直；（设置相机在水平面的位置，改变观察角度）
transform（都可独立针对xyz一方向改变）
二维：
- transform-origin：水平 垂直；（自定义中心点的位置）
- 旋转：transform：rotate（deg）（默认以中心点顺时针旋转）
- 平移：transform：translate（水平，垂直）（默认参照元素的左上角）
- 缩放：transform：scale（水平，垂直）传入数字代表放大缩小倍数，若只传一个数 则xy同步变化
- 斜切：transform：skew（水平deg，垂直deg）若只传一个数 代表沿x轴斜切，若角度值为正，则往当前轴负方向斜切，反之角度值为负，则正向斜切
- 综合：transform：translate（x，y） scale（num） skew（x，y） rotate（deg）；
（会改变坐标系，所以 rotate 不推荐放前面）
三维（二维和三维推荐使用三维，渲染效果更好）：
- transform: translate3d(x方向的偏移，y方向的偏移，z方向的偏移);
- transform: scale3d(x方向的缩放，y方向的缩放，z方向的缩放);
- transform: rotate3d(x,y,z,angle)
x,y,z：代表x,y,z方向上的一个向量值,围绕着向量旋转
angle：代表角度
例如：transform: rotate3d(1,0,0,30deg);
transform-style：preserve-3d；（由于页面二维，所以上面三条设置看不出来，想要看效果，需要在父元素中设置此属性）
再结合 translate+rotate 做立方体（先rotate（改变坐标系）再translate（固定数值））
添加 perspective 增强透视效果，对动画不应用此值
/* 立方体动画 */
ul {
width: 200px;
height: 200px;
margin: 100px auto;
transform: rotate3d(1, 1, 0, 0deg);
transform-style: preserve-3d;
position: relative;
animation: lunbo 5s infinite linear;
}
@keyframes lunbo {
form {
transform: rotate3d(1, 1, 0, 0deg);
}
to {
transform: rotate3d(1, 1, 0, 360deg);
}
}
ul li {
width: 200px;
height: 200px;
list-style: none;
text-align: center;
opacity: .8;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-of-type(1) {
background-color: #ffff00;
transform: translateZ(100px);
}
ul li:nth-of-type(2) {
background-color: #0ff3ff;
transform: rotateX(90deg) translateZ(100px);
}
ul li:nth-of-type(3) {
background-color: #334455;
transform: rotateX(180deg) translateZ(100px);
}
ul li:nth-of-type(4) {
background-color: #F07AFA;
transform: rotateX(270deg) translateZ(100px);
}
ul li:nth-of-type(5) {
background-color: #f98769;
transform: rotateY(90deg) translateZ(100px);
}
ul li:nth-of-type(6) {
background-color: #954210;
transform: rotateY(270deg) translateZ(100px);
}
/* 六棱柱动画 */
ul {
width: 200px;
height: 200px;
transform-style: preserve-3d;
position: absolute;
left: 400px;
top: 500px;
animation: lunbo 10s infinite linear;
}
@keyframes lunbo {
from {
transform: rotateX(-20deg) rotateY(0deg);
}
to {
transform: rotateX(-20deg) rotateY(360deg);
}
}
ul:hover {
animation-play-state: paused;
}
ul:hover li {
opacity: 0.3;
}
ul li:hover {
opacity: 1;
}
ul li {
width: 200px;
height: 200px;
list-style: none;
float: left;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-of-type(1) {
background-color: #60be47;
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-of-type(2) {
background-color: #8c902e;
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-of-type(3) {
background-color: #a66853;
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-of-type(4) {
background-color: #604483;
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-of-type(5) {
background-color: #43b3bb;
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-of-type(6) {
background-color: #9a7d94;
transform: rotateY(360deg) translateZ(200px);
}
animation（与过度区别：无需人为触发）
animation: name duration timing-function delay iteration-count direction fill-mode;
这三步必须有：
（1）animation-name：指定动画名称
（2）@kframes name{ from{ }to{ }} 或是{0%{ } 25%{ }等等}
（3）animation-duration：指定动画时间
- animation-timing-function：控制过度动画速度（linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速 steps(n)-可以让过度效果分为指定几次来完成，，更多自定义过度速度 cubic-bezier），其中 steps 可以实现打字机效果
- animation-delay：延迟时间
- animation-iteration-count：动画次数（infinite-无限次）
- animation-direction：动画方向（alternate-往返）
- animation-play-state：动画状态（默认running 设置paused为暂停）
- animation-fill-mode：none；（forwards-最后一帧停止； backwards-如果动画有初始状态，如初始旋转，那么立刻进入初始状态，前提：添加了动画延迟； both-前面两个都有）
简写：animation：name 时长 速度 delay 动画次数 往返与否；（name和时长必须有）
实例：
div {
width: 200px;
height: 200px;
background-color: #f98769;
animation: move 2s infinite ease-in;
}
/*创建动画*/
@keyframes move {
0% {
transform: translate(0, 0);
}
33% {
transform: translate(500px, 500px);
}
66% {
transform: translate(500px, 0);
}
100% {
transform: translate(0, 0);
}
}
div:hover {
animation-play-state: paused;
}
注：
- 如果有和默认样式中同名的样式，会覆盖默认样式
- 编写动画中，固定不变的值写在前面，需要变化的值写在后面
box-shadow
box-shadow：水平 垂直 模糊度 阴影扩展 阴影颜色 内外阴影（默认外阴影，inset传入内阴影）；
多层阴影：box-shadow：水平 垂直 模糊度 阴影扩展 阴影颜色 内外阴影（默认外阴影，inset传入内阴影），水平 垂直 模糊度 阴影扩展 阴影颜色 内外阴影（默认外阴影，inset传入内阴影），等等；
text-shadow
text-shadow：水平 垂直 模糊度 阴影颜色（默认跟从文字颜色）；
多层阴影：text-shadow：水平 垂直 模糊度 阴影颜色（默认跟从文字颜色），水平 垂直 模糊度 阴影颜色（默认跟从文字颜色），等等；
box-sizing
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | border和padding不计算入width之内，width=内容(默认属性) |
| border-box | width=内容+padding+border(怪异模式) |
| inherit | 规定应从父元素继承 box-sizing 属性的值 |
注：
- 表单的 input、select 默认的样式是不同的，所以就造成了 width 设置的一样，但就是对不齐，可以设置
box-sizing:border-box;来解决不一致问题 - 通过设置
box-sizing:border-box;防止因为设置padding或border而导致盒子宽高改变，稳固网页结构
border-radius
/*四个角都一样*/
border-radius: 10px;
/*左上/右下，右上/左下*/
border-radius: 10px 20px;
/*左上，右上/左下，右下*/
border-radius: 10px 20px 30px;
/*左上，右上，右下，左下*/
border-radius: 10px 20px 30px 40px;
/*添加/是用来设置当前不同方向的半径值，水平x方向/垂直y方向，下面这个可用来绘制椭圆*/
border-radius: 100px/50px;
/*设置某一圆角*/
border-top-right-radius: 20px;
/*设置某个角点的两个方向上的不同圆角值，类似添加/*/
border-top-right-radius: 100px 50px;
/*设置四个角点的不同方向上的不同角值，代表：（水平方向的 左上，右上，右下，左下）/（垂直方向的 左上，右上，右下，左下）*/
border-radius: 90px 80px 60px 100px/50px 60px 70px 80px;
扫一扫
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
