<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 SVG火箭横线元素动画特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
margin: 0;
}
.rocket-container {
position: relative;
width: 100%;
height: 100%;
}
.rocket-line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 2px;
background: linear-gradient(to right, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
background-size: 200% 100%;
animation: rocket-line-animation 2s infinite linear;
}
.rocket {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 50px;
height: 100px;
background-color: #f00;
animation: rocket-animation 2s infinite linear;
}
.rocket::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #f00;
}
.rocket::after {
content: '';
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 100px;
background-color: #000;
}
@keyframes rocket-line-animation {
0% {
background-position: 200% 0%;
}
100% {
background-position: 0% 0%;
}
}
@keyframes rocket-animation {
0% {
left: 0;
}
100% {
left: 100%;
transform: translateX(-100%) translateY(-50%);
}
}
.url-container {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="rocket-container">
<div class="rocket"></div>
<div class="rocket-line"></div>
</div>
</body>
</html>