1. 过渡(CSS3) transitio
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 过渡方式默认是 "ease"。 | 3 |
| transition-delay | 延迟时间。默认是 0。 | 3 |
手风琴案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background-color: #efefef;
}
.content{
width: 800px;
height: 125px;
border-radius: 10px;
margin: 100px auto 0px;
background-color: #fff;
padding: 20px;
overflow: hidden;
}
.content ul{
width: 120%;
height: 100%;
}
.content ul li{
width: 125px;
height: 125px;
border-radius: 10px;
overflow: hidden;
float: left;
margin-right: 10px;
}
.content ul li:last-child{
margin-right: 0px;
}
.content ul li img{
width: 575px;
height: 100%;
}
.content:hover li{
width: 35px;
}
.content ul li:hover {
width: 575px;
}
</style>
</head>
<body>
<div class="content">
<ul>
<li>
<img src="./2a.jpg" alt="">
</li>
<li>
<img src="./2a.jpg" alt="">
</li>
<li>
<img src="./2a.jpg" alt="">
</li>
<li>
<img src="./2a.jpg" alt="">
</li>
<li>
<img src="./2a.jpg" alt="">
</li>
<li>
<img src="./2a.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
2. 2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
transform 变换 变形的意思
2.1 移动 translate(x, y)
平移：transform:translate(x,y)
2.2 缩放 scale(x, y) （0~1）
注意: scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而 任何大于1的值，作用是让元素放大。
2.3 旋转 rotate(deg)
| 语法 | 意义 |
|---|---|
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
可以对元素进行旋转，正值为顺时针，负值为逆时针；
注意单位是 deg 度数
旋转风车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.content {
width: 405px;
height: 400px;
margin: 0px auto;
transition: all 20s;
}
.content:hover{
transform: rotate(3600deg);
}
.content .top div,
.content .bottom div {
float: left;
}
.content .top {
width: 100%;
height: 200px;
}
.content .bottom .right{
width: 200px;
height: 200px;
/* 渐变色 */
background-image: linear-gradient(to right bottom, skyblue, pink);
/* border-radius: 左上角 右上角 右下角 左下角; */
border-radius: 0px 200px 0px 200px;
}
.content .top .left {
width: 200px;
height: 200px;
background-image: linear-gradient(to right top, chocolate, pink);;
border-radius: 0px 200px 0px 200px;
}
.content .bottom .left,
.content .top .right {
width: 200px;
height: 200px;
/* 渐变色 */
background-image: linear-gradient(to right top, skyblue, pink);
/* border-radius: 左上角 右上角 右下角 左下角; */
border-radius: 200px 0px 200px 0px;
}
.content .bottom .left {
background-image: linear-gradient(to right top, aqua, springgreen);
}
.content .bottom .right {
background-image: linear-gradient(to right top, #FF4500, #C71585);
}
.line{
width: 15px;
height: 460px;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-64%,42%);
background-image: linear-gradient(to right top,orange,purple);
z-index: -1;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="line"></div>
</body>
</html>
2.4 transform-origin可以调整元素转换变形的原点
| 名称 | 值 | 描述 |
|---|---|---|
| x | 位置 | （left、center、right）/ 百分数 / 数值 x 轴基点坐标 |
| y | 位置 | （top、center、bottom）/ 百分数 / 数值 y 轴基点坐标 |
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
2.5 倾斜 skew(deg, deg)
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
-
skew（30deg，0）：是表示只在X轴(方向)倾斜，逆时针旋转
-
skew（-30deg，0）：是表示只在X轴(方向)倾斜，顺时针旋转
-
skew（0，30deg）：是表示只在Y轴(方向)倾斜，顺时针旋转
-
skew（0，-30deg）：是表示只在Y轴(方向)倾斜，逆时针旋转
1、skewX() ： 按给定的角度沿X轴指定斜切变换。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行。如：transform:skewX(30deg)
2、skewY() ： 按给定的角度沿Y轴指定斜切变换。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。如：transform:skewY（10deg）
3. 3D变形(CSS3) transform
单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
或者用左手法则也行：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！为正顺时针旋转，为负，逆时针旋转。
3.1 rotateX()
就是沿着 x 立体旋转.
3.2 rotateY()
沿着y轴进行旋转
3.3 rotateZ()
沿着z轴进行旋转
3.4 透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
-
透视原理： 近大远小 。
-
浏览器透视：把近大远小的所有图像，透视在屏幕上。
-
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
3.5 背部可见性:backface-visibility
| 值 | 描述 |
|---|---|
| visible（默认） | 背面是可见的。 |
| hidden | 背面是不可见的。 |
开门案例
3.6 是否保留3D位置:transform-style
| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。 |
| preserve-3d | 子元素将保留其 3D 位置。 |
4. 动画(CSS3) animation：
小汽车案例
充电小球案例:
1657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
