WickedCSS3动画库演示特效_wicked css-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WickedCSS3动画库演示特效</title>
<style>
/* 基础样式 */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: white;
margin: 0;
padding: 0;
min-height: 100vh;
overflow-x: hidden;
}

@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}

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

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.animation-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 50px;
}

.animation-item {
width: 200px;
height: 200px;
background: rgba(255,255,255,0.2);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
}

.animation-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* 动画效果 */
.bounce {
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}

.flip {
animation: flip 3s infinite;
}

@keyframes flip {
0% { transform: perspective(400px) rotateY(0); }
50% { transform: perspective(400px) rotateY(180deg); }
100% { transform: perspective(400px) rotateY(360deg); }
}

.shake {
animation: shake 0.5s infinite;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.rotate {
animation: rotate 2s linear infinite;
}

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

.pulse {
animation: pulse-anim 1.5s ease-out infinite;
}

@keyframes pulse-anim {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255,255,255,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.float {
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

.wobble {
animation: wobble 3s infinite;
}

@keyframes wobble {
0%, 100% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
}

.flash {
animation: flash 2s infinite;
}

@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0.3; }
}

.swing {
transform-origin: top center;
animation: swing 3s infinite;
}

@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.tada {
animation: tada 2s infinite;
}

@keyframes tada {
0% { transform: scale(1); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0); }
}

.lightSpeedIn {
animation: lightSpeedIn 2s infinite;
}

@keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}

/* 3D效果 */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate3d 10s infinite linear;
}

.cube-face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.2);
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
opacity: 0.9;
}

.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotate3d {
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 链接样式 */
.link {
margin-top: 50px;
padding: 15px 30px;
background: rgba(255,255,255,0.2);
border-radius: 50px;
display: inline-block;
text-decoration: none;
color: white;
font-weight: bold;
transition: all 0.3s ease;
border: 2px solid white;
}

.link:hover {
background: rgba(255,255,255,0.4);
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<h1>WickedCSS3动画库演示特效</h1>

<div class="animation-box">
<div class="animation-item bounce">弹跳效果</div>
<div class="animation-item flip">翻转效果</div>
<div class="animation-item shake">震动效果</div>
<div class="animation-item rotate">旋转效果</div>
<div class="animation-item pulse">脉动效果</div>
<div class="animation-item float">浮动效果</div>
<div class="animation-item wobble">摇摆效果</div>
<div class="animation-item flash">闪烁效果</div>
<div class="animation-item swing">摆动效果</div>
<div class="animation-item tada">庆祝效果</div>
<div class="animation-item lightSpeedIn">光速进入</div>
</div>

<div style="margin: 50px auto; width: 200px; height: 200px;">
<div class="cube">
<div class="cube-face front">3D正面</div>
<div class="cube-face back">3D背面</div>
<div class="cube-face right">3D右面</div>
<div class="cube-face left">3D左面</div>
<div class="cube-face top">3D顶面</div>
<div class="cube-face bottom">3D底面</div>
</div>
</div>


</div>

<script>
// 为每个动画元素添加点击事件，暂停/恢复动画
document.querySelectorAll('.animation-item').forEach(item => {
item.addEventListener('click', function() {
if (this.style.animationPlayState === 'paused') {
this.style.animationPlayState = 'running';
this.style.opacity = '1';
} else {
this.style.animationPlayState = 'paused';
this.style.opacity = '0.7';
}
});
});

// 3D立方体鼠标交互
const cube = document.querySelector('.cube');
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let rotateX = 0, rotateY = 0;

cube.addEventListener('mousedown', (e) => {
isDragging = true;
previousMousePosition = { x: e.clientX, y: e.clientY };
});

document.addEventListener('mousemove', (e) => {
if (!isDragging) return;

const deltaX = e.clientX - previousMousePosition.x;
const deltaY = e.clientY - previousMousePosition.y;

rotateY += deltaX * 0.5;
rotateX -= deltaY * 0.5;

cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

previousMousePosition = { x: e.clientX, y: e.clientY };
});

document.addEventListener('mouseup', () => {
isDragging = false;
});
</script>
</body>
</html>