渐变描边弹跳特效

原创已于 2025-06-27 15:26:16 修改 · 608 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-30 15:06:08 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变描边弹跳特效</title>
<style>
body {
margin: 0;
padding: 0;
background: #0f0c29;
background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.gradient-border-box {
position: relative;
width: 300px;
height: 300px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 30px;
}

.gradient-border-box::before {
content: '';
position: absolute;
width: 150%;
height: 150%;
background: linear-gradient(45deg,
#ff0000, #ff7300, #fffb00,
#48ff00, #00ffd5, #002bff,
#7a00ff, #ff00c8, #ff0000);
animation: rotateBorder 3s linear infinite;
}

.gradient-border-box::after {
content: '';
position: absolute;
inset: 5px;
background: #0f0c29;
border-radius: 16px;
}

.box-content {
position: relative;
z-index: 10;
color: white;
font-size: 2em;
text-align: center;
}

@keyframes rotateBorder {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.bouncing-element {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59);
border-radius: 50%;
position: absolute;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-100px) scale(1.1);
}
}

.bouncing-element:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}

.bouncing-element:nth-child(2) {
top: 60%;
left: 80%;
animation-delay: 0.5s;
}

.bouncing-element:nth-child(3) {
top: 80%;
left: 20%;
animation-delay: 1s;
}

.bouncing-element:nth-child(4) {
top: 30%;
left: 70%;
animation-delay: 1.5s;
}

.footer {
position: absolute;
bottom: 20px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-align: center;
}

.footer a {
color: #c471ed;
text-decoration: none;
transition: all 0.3s;
}

.footer a:hover {
color: #12c2e9;
text-decoration: underline;
}

.pulse-text {
color: white;
font-size: 2.5em;
margin-bottom: 30px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
50% {
transform: scale(1.1);
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
100% {
transform: scale(1);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
}
</style>
</head>
<body>
<div class="container">
<div class="pulse-text">炫酷特效展示</div>

<div class="gradient-border-box">
<div class="box-content">
渐变描边<br>效果展示
</div>
</div>

<div class="bouncing-element"></div>
<div class="bouncing-element"></div>
<div class="bouncing-element"></div>
<div class="bouncing-element"></div>


</div>

<script>
// 创建更多弹跳元素
function createBouncingElements() {
const container = document.querySelector('.container');
const colors = [
'linear-gradient(135deg, #12c2e9, #c471ed)',
'linear-gradient(135deg, #f64f59, #c471ed)',
'linear-gradient(135deg, #12c2e9, #f64f59)',
'linear-gradient(135deg, #a8ff78, #78ffd6)'
];

for (let i = 0; i < 6; i++) {
const element = document.createElement('div');
element.className = 'bouncing-element';

// 随机属性
const size = Math.random() * 50 + 30;
const left = Math.random() * 90;
const top = Math.random() * 90;
const delay = Math.random() * 2;
const duration = 2 + Math.random() * 3;
const colorIndex = Math.floor(Math.random() * colors.length);

element.style.width = `${size}px`;
element.style.height = `${size}px`;
element.style.left = `${left}%`;
element.style.top = `${top}%`;
element.style.animationDelay = `${delay}s`;
element.style.animationDuration = `${duration}s`;
element.style.background = colors[colorIndex];

container.appendChild(element);
}
}

// 页面加载后创建元素
window.addEventListener('load', () => {
createBouncingElements();

// 每隔一段时间重新创建一些元素，保持动态效果
setInterval(() => {
const elements = document.querySelectorAll('.bouncing-element');
if (elements.length < 15) {
createBouncingElements();
}
}, 3000);
});
</script>
</body>
</html>