本章目标
- 会使用transfoem 2D 变形设置网页元元素
- 会使用transition制作过渡动画
- 会使用animation制作网页动画
一.CSS3概述
CSS3是HTML的样式语言，它用于描述和控制HTML文档的外观和布局。CSS3是CSS的最新版本，引入了一些新的特性和模块，以增强样式表的功能和灵活性。
CSS函数概述
CSS函数是一种用于处理CSS属性值的特殊函数。它们可以接受特定的指令（输入参数），并执行指令的相应动作，并返回执行结果，然后将该结果用作CSS属性的值。
函数名(参数1, 参数2, ...)
函数名称：函数的名称用于识别和调用特定的函数。例如，rgb()是一个用于设置颜色的函数。
参数：函数接受一个或多个参数，用于指定函数执行时的数据。参数可以是固定值（如数字或字符串），也可以是变量或其他表达式。参数之间用逗号分隔。
返回值：函数的执行结果可以作为值返回。返回值可以是一个具体的值（如颜色值或长度值），也可以是一个变量。二.CSS3变形
transform属性
- CSS3变形是一些效果的集合,如平移，旋转，缩放，倾斜效果。
- 每个效果都可以称为变形（transform），可以分别操控元素发生平移，旋转，缩放，倾斜等变化。
语法：
transform:[变形函数] *;变形函数：
- 演示案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li{ list-style: none; float: left; width: 80px; line-height: 40px; background-color: orange; border-radius: 6px; font-size: 16px; margin-left: 3px; } li a{ text-decoration: none;/**去除下划线**/ color: #fff; display: block;/**将行元素改变为块元素从而设置高度**/ text-align: center; height: 40px; } li a:hover{ background-color: rgba(242, 88, 6, 0.87); border-radius: 6px; } </style> </head> <body> <ul> <li><a href="#">服装城</a></li> <li><a href="#">美妆馆</a></li> <li><a href="#">超市</a></li> <li><a href="#">全球购</a></li> <li><a href="#">闪购</a></li> <li><a href="#">团购</a></li> <li><a href="#">拍卖</a></li> <li><a href="#">金融</a></li> </ul> </body> </html>
translate()：平移函数
语法：
- 正号：右，下/ 负号：左，上
li a:hover{ /**正号：右，下 负号：左，上**/
transform: translate(4px,4px);
}
设置平移函数后点击图标后图标向右下方发生平移，效果如上图。
scale()：缩放函数
语法：
- 正号：放大/ 负号：缩小
li a:hover{ /**正号：放大 负号：缩小**/
transform: scale(2);
}
设置缩放函数后点击图标后图标放大2倍，如上图所示。
rotate()：旋转函数
语法：
<style type="text/css">
img:hover{transform: rotate(-90deg);}
</style>演示案例：
设置旋转函数后点击图片后，图片逆时针旋转90°。效果如下图。
skew()：倾斜函数
语法：
li a:hover{
transform: skew(40deg,0deg);
}
设置倾斜函数后点击图标后图标倾斜，效果如上图所示。
三.CSS3过渡
transition
- transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
- CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡
- 函数
触发机制：
演示案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height: 31.25rem;
background-color: blue;
/**针对背景颜色设置过渡动画效果**/
transition: background-color 4s ease-in-out 5s ;
}/**引入过渡动画效果**/
div:hover{background-color: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>上述代码执行后，边框背景颜色将由蓝色经过5s延迟，最终经过执行时间4s后变为红色。
练习
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**使用结构伪类选择器选中所有偶数子元素 even:偶数的集合**/
div img:nth-child(even){
width: 200px;
}
div img:nth-child(odd){
width: 300px;
}
.box{
width: 960px;
margin: 200px auto;/**盒子居中**/
position: relative;
}
.box img{
border: 1px solid #ddd;
padding: 10px;
/**针对所有img设置绝对定位，使用img浮动**/
position: absolute;
background: #fff;
z-index: 1;
transition: all 0.5s ease-in-out;
}
.box img:nth-child(1){/**针对浮动后的img单独设置偏移量**/
top: 0px;
left: 300px;
transform: rotate(-15deg);/**旋转函数**/
}
.box img:nth-child(2) {
top:-50px;
left: 600px;
transform: rotate(-20deg);
}
.box img:nth-child(3) {
bottom: 0;
right: 0;
transform: rotate(15deg);
}
.box img:nth-child(4) {
bottom: 0;
left: 400px;
transform: rotate(-20deg);
}
.box img:nth-child(5) {
bottom: 0;
left: 0;
transform: rotate(-30deg);
}
.box img:nth-child(6) {
top: 0;
left: 0;
transform: rotate(20deg);
}
.box img:nth-child(7) {
top: 0;
left: 700px;
transform: rotate(20deg);
}
.box img:nth-child(8) {
bottom: -20px;
right: 500px;
transform: rotate(30deg);
}
.box img:nth-child(9) {
top: 90px;
left: 550px;
transform: rotate(15deg);
}
.box img:nth-child(10) {
left: 180px;
top: 20px;
transform: rotate(-10deg);
}
.box img:hover{/**设置鼠标选中后的样式**/
/**设置堆叠的优先级：鼠标点击后优先展示**/
z-index: 2;
box-shadow: 5px 5px 5px #ddd;
/**针对所有的img设置动画样式**/
transform: rotate(0deg) scale(1.5);
}
</style>
</head>
<body>
<div class="box" id="box">
<img src="image/1.jpg" alt=""/>
<img src="image/2.jpg" alt=""/>
<img src="image/3.jpg" alt=""/>
<img src="image/4.jpg" alt=""/>
<img src="image/5.jpg" alt=""/>
<img src="image/6.jpg" alt=""/>
<img src="image/7.jpg" alt=""/>
<img src="image/8.jpg" alt=""/>
<img src="image/9.jpg" alt=""/>
<img src="image/10.jpg" alt=""/>
</div>
</body>
</html>旋转按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px; height: 200px;
border: 5px solid white;margin: 200px auto;
border-radius: 200px;
overflow: hidden;
transition:transform 4s ease-in-out 4s;
}
div:hover{transform: scale(2) rotate(270deg);}
</style>
</head>
<body>
<div>
<img src="index1.png" width="200px" height="200px">
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看