<div class="bounce-text">
<span>這</span>
<span>是</span>
<span>一</span>
<span>個</span>
<span>彈</span>
<span>跳</span>
<span>的</span>
<span>示</span>
<span>範</span>
</div>
body {
background: #282c34;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.bounce-text {
font-size: 4rem;
font-weight: bold;
display: inline-block;
position: relative;
}
.bounce-text span {
display: inline-block;
position: relative;
}
.bounce-text span:hover {
animation: jump-text 1.5s 0s ease;
}
@keyframes jump-text {
0%,
100% {
transform: translateY(0) scale(1.1);
}
25%,
75% {
transform: translateY(0) scale(1.2, 0.8);
}
50% {
transform: translateY(-50px) scale(0.8, 1.2);
}
}
/* 每個字母的顏色設計 */
.bounce-text span:nth-child(1) {
color: #ff5733;
}
.bounce-text span:nth-child(2) {
color: #33ff57;
}
.bounce-text span:nth-child(3) {
color: #3357ff;
}
.bounce-text span:nth-child(4) {
color: #ff33a6;
}
.bounce-text span:nth-child(5) {
color: #f1c40f;
}
.bounce-text span:nth-child(6) {
color: #8e44ad;
}
.bounce-text span:nth-child(7) {
color: #2ecc71;
}
.bounce-text span:nth-child(8) {
color: #e67e22;
}
.bounce-text span:nth-child(9) {
color: #3498db;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.