一·、回顾知识点
1、空间位移
1.1 初始状态:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空间位移</title>
<style>
.box{
margin: 100px auto;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.2 增加位移效果:
<style>
body{
/* 实现近大远小的效果 */
perspective: 1000px;
}
.box{
margin: 100px auto;
width: 200px;
height: 200px;
background-color: pink;
transition: all 1s;
}
.box:hover{
transform: translate3d(100px,100px,100px);
}
</style>
空间位移
2、空间旋转
2.1 x轴旋转
<!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>
.box{
width: 200px;
height: 200px;
margin: 200px auto;
/* 增加透视 */
perspective: 1000px;
}
.box img{
width: 200px;
transition: all 2s;
}
.box img:hover{
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/course08.png" alt="">
</div>
</body>
</html>
2.2 Y轴旋转
<!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>
.box{
width: 200px;
height: 200px;
margin: 200px auto;
/* 增加透视 */
perspective: 1000px;
}
.box img{
width: 200px;
transition: all 2s;
}
.box img:hover{
/* transform: rotateX(60deg); */
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/course08.png" alt="">
</div>
</body>
</html>
2.3 Z轴旋转
<!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>
.box{
width: 200px;
height: 200px;
margin: 200px auto;
/* 增加透视 */
perspective: 1000px;
}
.box img{
width: 200px;
transition: all 2s;
}
.box img:hover{
/* transform: rotateX(60deg); */
/* transform: rotateY(60deg); */
transform: rotateZ(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/course08.png" alt="">
</div>
</body>
</html>
3、动画
3.1 定义动画
@keyframes 动画名称 {
from {}
to{}
}
@keyframes 动画名称 {
0%{}
10%{}
15%{}
100%{}
}
3.2 使用动画
animation:动画名称 动画花费时长;
animation:动画名称动画时长 速度曲线 延迟时间重复次数动画方向 执行完毕时的状态;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奔跑</title>
<style>
.box{
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite,move 10s forwards;
}
@keyframes run {
100%{
background-position: -1680px 0px;
}
}
@keyframes move {
100%{
transform: translateX(1000px);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
效果:
奔跑的精灵
二、时钟案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
margin: 100px auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid skyblue;
}
.line {
position: absolute;
top: 0px;
left: 50%;
margin-left: -2px;
width: 4px;
height: 200px;
background-color: orange;
}
.line1 {
transform: rotate(30deg);
}
.line2 {
transform: rotate(60deg);
}
.line3 {
transform: rotate(90deg);
}
.line4 {
transform: rotate(120deg);
}
.line5 {
transform: rotate(150deg);
}
.line6 {
transform: rotate(180deg);
}
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
background-image: url(./images/12webp.webp);
background-size: contain;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
.h{
position: absolute;
bottom: 50%;
left: 50%;
margin-left: -2px;
width: 4px;
height: 40px;
background-color: #fff;
transform-origin: center bottom;
animation: move 43200s infinite;
}
.m{
position: absolute;
bottom: 50%;
left: 50%;
margin-left: -2px;
width: 4px;
height: 60px;
background-color: #fff;
transform-origin: center bottom;
animation: move 3600s infinite;
}
.s{
position: absolute;
bottom: 50%;
left: 50%;
margin-left: -1px;
width: 2px;
height: 80px;
background-color: #fff;
/* 旋转中心点 */
transform-origin: center bottom;
animation: move 60s steps(60) infinite;
}
@keyframes move {
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="block"></div>
<!-- 中心 -->
<div class="center"></div>
<!-- 时针 -->
<div class="h"></div>
<!-- 分 -->
<div class="m"></div>
<!-- 秒 -->
<div class="s"></div>
</div>
</body>
</html>
效果:
时钟