<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
<style>
* {
margin: 0;
padding: 0;
}
.gun {
position: relative;
display: inline-block;
width: 300px;
height: 240px;
background: url("img/gun.webp");
z-index: 1;
}
.box {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
border-radius: 0 20px 20px 0;
background-color: orange;
top: -146px;
left: -50px;
z-index: 0;
animation: move 10s linear;
animation-iteration-count: infinite;
animation-play-state: paused;
}
body:hover .box {
animation-play-state: running;
}
body:hover .people {
animation-play-state: running;
}
.people {
width: 60px;
height: 60px;
background-color: #f1f1f1;
font-size: 14px;
line-height: 60px;
position: relative;
left: 250px;
top: -4px;
transition-delay: 9s;
transition-duration: 1s;
text-align: center;
}
.people p {
transform: scale(.6);
}
body:hover .people {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: pink;
line-height: 120px;
}
@keyframes move {
/* 出枪 */
30% {
transform: translateX(1200px);
}
/* 第一次拐弯 */
50% {
transform: translateX(1200px) rotate(90deg);
}
60% {
transform: translate(1200px,300px) rotate(90deg);
}
/* 第二次拐弯 */
70% {
transform: translate(1200px, 300px) rotate(180deg);
}
80% {
transform: translate(0, 300px) rotate(180deg);
}
/* 回来 */
90% {
transform: translate(0, 300px) rotate(270deg);
}
100% {
transform: translate(0) rotate(270deg);
}
}
</style>
</head>
<body>
<div class="gun"></div>
<div class="box"></div>
<div class="people">
<p>子弹拐弯</p>
</div>
</body>
</html>
头一次尝试css3的动画
最新推荐文章于 2024-10-03 22:12:17 发布