请老师检查

来源：2-19 动画效果实战课

芜湖呼

2022-01-22 20:31:02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
position: absolute;
top: 100px;
left: 100px;
animation: ud 2s linear 0s alternate infinite;
}
div {
height: 100px;
width: 1px;
background-color: black;
position: absolute;
transform: rotate(45deg);
animation: move 0.5s linear 0s infinite;
opacity: 0;
}
.box2 {
animation: move 0.5s linear 1s infinite;
}
.box3 {
animation: move 0.5s linear 0.3s infinite;
}
.box1 {
top: 22px;
left: 230px;
}
.box2 {
top: 30px;
left: 300px;
}
.box3 {
top: 100px;
left: 340px;
}
@keyframes ud {
0% {
top: 100px;
left: 100px;
}
50% {
top: 70px;
left: 70px;
}
100% {
top: 130px;
left: 130px;
}
}
@keyframes move {
0% {
transform: rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(45deg) translateY(300px);
opacity: 0;
}
}
</style>
</head>
<body>
<img src="img/huojian.png" alt="" />
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
position: absolute;
}
.bulb {
top: 100px;
left: 100px;
}
.light {
top: 37px;
left: 24px;
/* opacity: 0; */
animation: boo 2s linear 0s alternate infinite;
}
@keyframes boo {
form {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<img class="bulb" src="img/dengpao.png" alt="" />
<img class="light" src="img/guang.png" alt="" />
</body>
</html>

在火箭的移动中使用绝对定位的top,left让火箭移动可以吗

写回答

1回答