SVG变色龙动画特效

原创已于 2025-06-27 11:12:05 修改 · 656 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-19 14:10:26 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG变色龙动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
overflow: hidden;
font-family: Arial, sans-serif;
}

.container {
position: relative;
width: 600px;
height: 400px;
}

.chameleon {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: moveChameleon 15s infinite alternate ease-in-out;
}

/* 变色龙身体部分 */
.body {
fill: #4CAF50;
transition: fill 2s ease;
animation: colorChange 10s infinite alternate;
}

/* 变色龙眼睛 */
.eye {
fill: #fff;
animation: blink 5s infinite;
}

.pupil {
fill: #000;
}

/* 变色龙舌头 */
.tongue {
fill: #FF5252;
transform-origin: left center;
animation: tongueMove 8s infinite;
}

/* 变色龙尾巴 */
.tail {
fill: #4CAF50;
transform-origin: left center;
animation: tailWag 7s infinite ease-in-out;
}

/* 变色龙腿 */
.leg {
fill: #4CAF50;
animation: legMove 3s infinite ease-in-out;
}

.leg.front {
animation-delay: 0.5s;
}

/* 背景叶子 */
.leaf {
fill: #2E7D32;
opacity: 0.7;
}

/* 动画定义 */
@keyframes colorChange {
0% { fill: #4CAF50; }
20% { fill: #FFC107; }
40% { fill: #FF5722; }
60% { fill: #9C27B0; }
80% { fill: #2196F3; }
100% { fill: #4CAF50; }
}

@keyframes blink {
0%, 96%, 100% { transform: scaleY(1); }
98% { transform: scaleY(0.1); }
}

@keyframes tongueMove {
0%, 95% { transform: scaleX(0); }
96%, 98% { transform: scaleX(1); }
100% { transform: scaleX(0); }
}

@keyframes tailWag {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}

@keyframes legMove {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
}

@keyframes moveChameleon {
0% { transform: translateX(-50px); }
100% { transform: translateX(50px); }
}

/* 版权信息 */
.footer {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}

.footer a {
color: #00f5d4;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<svg class="chameleon" viewBox="0 0 600 400">

<path class="leaf" d="M100,300 Q150,250 200,300 Q250,350 200,400 Q150,450 100,400 Q50,350 100,300 Z"/>
<path class="leaf" d="M400,350 Q450,300 500,350 Q550,400 500,450 Q450,500 400,450 Q350,400 400,350 Z"/>


<path class="body" d="M300,200 Q350,150 400,200 Q450,250 400,300 Q350,350 300,300 Q250,250 300,200 Z"/>


<path class="tail" d="M250,250 Q200,200 150,250 Q100,300 150,350 Q200,400 250,350 Q300,300 250,250 Z"/>


<path class="body" d="M400,200 Q450,150 500,200 Q550,250 500,300 Q450,350 400,300 Q350,250 400,200 Z"/>


<circle class="eye" cx="450" cy="220" r="20"/>
<circle class="pupil" cx="460" cy="220" r="8"/>


<path class="tongue" d="M520,250 L550,250 L550,240 L520,240 Z"/>


<path class="leg front" d="M350,300 L330,350 L350,350 Z"/>
<path class="leg" d="M370,320 L350,370 L370,370 Z"/>
</svg>
</div>

</body>
</html>