<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>SPEED主题视频合成器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border
-box;
font
-family: 'Arial Rounded MT Bold', 'Arial', sans
-serif;
}
body {
background: linear
-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
min
-height: 100vh;
padding: 20px;
}
.container {
max
-width: 1200px;
margin: 0 auto;
}
header {
text
-align: center;
margin
-bottom: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border
-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
h1 {
font
-size: 2.8rem;
margin
-bottom: 10px;
background: linear
-gradient(90deg, #ff6b6b, #ffa86b, #ffda6b, #6bff9e, #6bc7ff, #9d6bff);
-webkit
-background-clip: text;
background-clip: text;
color: transparent;
text
-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.subtitle {
font
-size: 1.2rem;
color: #a0a0dd;
margin
-bottom: 20px;
}
.video
-container {
position: relative;
width: 100%;
height: 450px;
margin
-bottom: 30px;
border
-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.video
-display {
width: 100%;
height: 100%;
background: linear
-gradient(45deg, #0f3460, #1a1a2e);
display: flex;
align
-items: center;
justify
-content: center;
position: relative;
overflow: hidden;
}
.current
-image {
width: 80%;
height: 80%;
background: linear
-gradient(45deg, #ff6b6b, #6bc7ff);
border
-radius: 10px;
display: flex;
align
-items: center;
justify
-content: center;
color: white;
font
-size: 2rem;
font
-weight: bold;
position: relative;
z
-index: 2;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
transition: transform 0.5s ease;
}
.speed
-lines {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z
-index: 1;
}
.line {
position: absolute;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.6);
transform
-origin: left;
animation: speedLine 1.5s linear infinite;
}
@keyframes speedLine {
0% {
transform: translateX(
-100%) scaleX(0);
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
transform: translateX(100%) scaleX(1);
opacity: 0;
}
}
.controls {
display: flex;
justify
-content: center;
gap: 20px;
margin
-bottom: 30px;
}
.btn {
padding: 12px 25px;
border: none;
border
-radius: 50px;
background: linear
-gradient(90deg, #ff6b6b, #ffa86b);
color: white;
font
-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}
.btn:hover {
transform: translateY(
-3px);
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
}
.btn:active {
transform: translateY(1px);
}
.btn
-play {
background: linear
-gradient(90deg, #6bff9e, #6bc7ff);
box-shadow: 0 5px 15px rgba(107, 255, 158, 0.4);
}
.btn
-play:hover {
box-shadow: 0 8px 20px rgba(107, 255, 158, 0.6);
}
.btn
-pause {
background: linear
-gradient(90deg, #ffda6b, #ffa86b);
box-shadow: 0 5px 15px rgba(255, 218, 107, 0.4);
}
.btn
-pause:hover {
box-shadow: 0 8px 20px rgba(255, 218, 107, 0.6);
}
.image
-gallery {
display: grid;
grid
-template
-columns: repeat(auto
-fit, minmax(250px, 1fr));
gap: 20px;
margin
-bottom: 30px;
}
.image
-card {
background: rgba(255, 255, 255, 0.1);
border
-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.image
-card:hover {
transform: translateY(
-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.card
-color {
height: 120px;
display: flex;
align
-items: center;
justify
-content: center;
font
-size: 1.5rem;
font
-weight: bold;
color: white;
text
-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.card
-content {
padding: 15px;
}
.card
-title {
font
-size: 1.2rem;
margin
-bottom: 10px;
color: #ffda6b;
}
.card
-text {
color: #a0a0dd;
font
-size: 0.9rem;
}
.footer {
text
-align: center;
padding: 20px;
margin
-top: 30px;
color: #6bc7ff;
font
-size: 0.9rem;
}
/* 响应式设计 */
@media (max
-width: 768px) {
h1 {
font
-size: 2.2rem;
}
.video
-container {
height: 350px;
}
.controls {
flex
-wrap: wrap;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>SPEED主题视频合成器</h1>
<p class="subtitle">将多张卡通风格SPEED主题图片合成为动态视频</p>
</header>
<div class="video
-container">
<div class="video
-display">
<div class="current
-image">SPEED</div>
<div class="speed
-lines" id="speedLines"></div>
</div>
</div>
<div class="controls">
<button class="btn btn
-play" id="playBtn">播放视频</button>
<button class="btn btn
-pause" id="pauseBtn">暂停</button>
<button class="btn" id="speedUpBtn"
本文详细解析了CSS中背景属性background-clip和background-origin的使用方法及其对元素视觉效果的影响，并介绍了box-sizing属性的不同取值对布局的影响。
扫一扫
2298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
