2. 浮动效果
概念： 浮动指的是漂浮到界面上层且进行左右移动的效果，只对容器本身生效，容器中的文字不参与：
float：负责设置容器的浮动效果，默认值为none，表示不浮动：float: left：容器浮起，并向左移动，直到触碰到其他元素或者边界。float: right：容器浮起，并向右移动，直到触碰到其他元素或者边界。
clear：清除自己所受的周围浮动的影响，默认值为none，表示不清除：clear: left：清除自己周围的所有左浮动效果。clear: right：清除自己周围的所有右浮动效果。clear: both：清除自己周围的所有左浮动和右浮动效果。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#text-by-float div:nth-child(1) {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#text-by-float div:nth-child(2) {
width: 150px;
height: 150px;
background-color: green;
float: left;
}
#text-by-float div:nth-child(3) {
width: 200px;
height: 200px;
background-color: yellow;
clear: both
}
</style>
</head>
<body>
<section id="text-by-float">
<div>第1个DIV</div>
<div>第2个DIV</div>
<div>第3个DIV</div>
</section>
</body>
</html>
效果
3. 颜色渐变
概念： background-image 除了设置背景图片外，还可以设置背景颜色的渐变效果，支持多种颜色链式渐变，且每个颜色参数后面允许追加百分比或像素值来设置该颜色从哪个位置开始出现渐变效果，省略则默认分配：
background-image: linear-gradient(方向, 颜色列表)：线性渐变指的是在某一条直线上的颜色渐变：- 方向可使用
to top等四个正方向单词。 - 方向可使用
to top left等四个角落方向单词。 - 方向可使用
deg作为角度单位，如0deg，-45deg等。
- 方向可使用
background-image: radial-gradient(方向, 颜色列表)：放射性渐变指的是从一个点向四周渐变：- 方向可选如
circle at center，表示颜色从中心向四周放射渐变。 - 方向可使用
circle at top等四个正方向单词。 - 方向可使用
circle at top left等四个角落方向单词。 circle可以使用ellipse椭圆形替代。
- 方向可选如
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#text-by-linear div {
width: 500px;
height: 100px;
background-image: linear-gradient(to right, red 90%, black, blue);
}
</style>
<style type="text/css">
#text-by-radial div {
width: 300px;
height: 300px;
border-radius: 50%;
background-image: radial-gradient(circle at center, red 10%, black, blue);
}
</style>
</head>
<body>
<section id="text-by-linear">
<div></div>
</section>
<section id="text-by-radial">
<div></div>
</section>
</body>
</html>
效果
4. 变形效果
概念： transform 负责设置元素的变形效果，默认值为 none，表示不变形：
transform: translate(-10px, 20px)：向左平移10px，向下平移20px。transform: scale(2, 0.5)：水平方向缩放2倍，竖直方向放大0.5倍。transform: rotate(-45deg)：逆时针旋转45度。transform: skew(-45deg)：逆时针倾斜45度。- 以元素中心点以下的部分为"脚"，正值脚向右动，负值脚向左动。
transform: translate(100px) scale(1.5) rotate(45deg) skew(45deg)：同时变形。transform-origin:10px 10px：可以重新设置变形参考点，默认元素中心点为原点。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px 300px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#text-by-translate div {
width: 100px;
height: 100px;
background-color: red;
}
#text-by-translate div:hover {
transform: translate(-100px, 100px);
}
</style>
<style type="text/css">
#text-by-scale div {
width: 100px;
height: 100px;
background-color: red;
}
#text-by-scale div:hover {
transform: scale(2, 0.5);
}
</style>
<style type="text/css">
#text-by-rotate div {
width: 100px;
height: 100px;
background-color: red;
border-bottom-right-radius: 50%;
}
#text-by-rotate div:hover {
transform: rotate(45deg);
}
</style>
<style type="text/css">
#text-by-skew div {
width: 100px;
height: 100px;
background-color: red;
}
#text-by-skew div:hover {
transform: skew(-45deg);
}
</style>
<style type="text/css">
#text-by-all-transform div {
width: 100px;
height: 100px;
background-color: red;
}
#text-by-all-transform div:hover {
transform: translate(100px) scale(1.5) rotate(45deg) skew(45deg);
}
</style>
<style type="text/css">
#text-by-origin div {
width: 100px;
height: 100px;
background-color: red;
}
#text-by-origin div:hover {
transform-origin: 100px 100px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<section id="text-by-translate">
<div></div>
</section>
<section id="text-by-scale">
<div></div>
</section>
<section id="text-by-rotate">
<div></div>
</section>
<section id="text-by-skew">
<div></div>
</section>
<section id="text-by-all-transform">
<div></div>
</section>
<section id="text-by-origin">
<div></div>
</section>
</body>
</html>
效果用代码测试
5. 动画过渡
概念： transition 可以让一次 :hover 动画具有过渡效果：
transition-property: width, height：在原始元素上指定过渡的样式列表，默认是all，表示全部样式过渡：none：清除所有过渡效果。
transition-duration: 1s, 0s：指定过渡效果的持续时间，需要和样式列表对应。transition-delay: 2s, 0s：指定过渡效果的延迟时间，需要和样式列表对应，transition-timing-function: ease：指定过渡效果的速度，默认是ease，表示匀减速：linear：匀速。ease-in：加速。ease-out：减速。ease-in-out：先加速，再减速。
transition: width 3s ease-in 1s, background-color 5s ease 0s：同时指定所有过渡效果：- 1s后元素的宽度以匀加速的形式在3s内完成动画。
- 0s后元素的颜色以匀减速的形式在5s内完成动画。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#text-by-transition div {
width: 100px;
height: 100px;
background-color: red;
transition-property: width, background-color;
transition-duration: 3s, 1s;
transition-delay: 1s, 0s;
transition-timing-function: ease-in;
}
#text-by-transition div:hover {
width: 500px;
height: 200px;
background-color: green;
}
</style>
<style type="text/css">
#text-by-also-specify div {
width: 100px;
height: 100px;
background-color: red;
transition: width 5s ease-in 1s, background-color 3s ease 0s;
}
#text-by-also-specify div:hover {
width: 500px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<section id="text-by-transition">
<div></div>
</section>
<section id="text-by-also-specify">
<div></div>
</section>
</body>
</html>
效果用代码测试
