最近搞文字动起来，记录下
1、波浪效果（逐个字符上下浮动）
2、呼吸效果（整体透明度变化）
3、更生动的波浪效果（带颜色变化）
4、左右动
5、（左右碰撞效果）
6、简单钟摆摆动（左右旋转)
7、每个字之间来回动
<template>
<div>
<h1>波浪效果（逐个字符上下浮动）</h1>
<div class="thinking-text">
<span>思</span>
<span>考</span>
<span>中</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<br />
<h1>呼吸效果（整体透明度变化）</h1>
<div class="breathing-text">思考中...</div>
<h1>更生动的波浪效果（带颜色变化）</h1>
<div class="wave-text">
思
<span>考</span>
<span>中</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<h1>左右动</h1>
<div class="thinking-effect">
思考中
<span class="dot dot1">.</span>
<span class="dot dot2">.</span>
<span class="dot dot3">.</span>
</div>
<h1>（左右碰撞效果）</h1>
<div class="bouncing-text">思考中...</div>
<h1>简单钟摆摆动（左右旋转）</h1>
<div class="bell-text">思考中...</div>
<h1>每个字之间来回动</h1>
<div class="bells-text">
<span class="bell bell-1">思</span>
<span class="bell bell-2">考</span>
<span class="bell bell-3">中</span>
<span class="bell bell-4">.</span>
<span class="bell bell-5">.</span>
<span class="bell bell-6">.</span>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
};
</script>
<style scoped lang="scss">
/* 波浪效果（逐个字符上下浮动） */
.thinking-text {
display: inline-block;
font-size: 24px;
}
.thinking-text span {
display: inline-block;
position: relative;
animation: wave 1.5s ease-in-out infinite;
}
.thinking-text span:nth-child(1) {
animation-delay: 0.1s;
}
.thinking-text span:nth-child(2) {
animation-delay: 0.2s;
}
.thinking-text span:nth-child(3) {
animation-delay: 0.3s;
}
.thinking-text span:nth-child(4) {
animation-delay: 0.4s;
}
.thinking-text span:nth-child(5) {
animation-delay: 0.5s;
}
.thinking-text span:nth-child(6) {
animation-delay: 0.6s;
}
@keyframes wave {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* 呼吸效果（整体透明度变化） */
.breathing-text {
display: inline-block;
font-size: 24px;
animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.7;
}
}
/* 更生动的波浪效果（带颜色变化） */
.wave-text {
font-size: 24px;
display: inline-block;
}
.wave-text span {
display: inline-block;
animation: waveColor 1.5s ease-in-out infinite;
}
.wave-text span:nth-child(1) {
animation-delay: 0.1s;
}
.wave-text span:nth-child(2) {
animation-delay: 0.2s;
}
.wave-text span:nth-child(3) {
animation-delay: 0.3s;
}
.wave-text span:nth-child(4) {
animation-delay: 0.4s;
}
.wave-text span:nth-child(5) {
animation-delay: 0.5s;
}
@keyframes waveColor {
0%,
100% {
transform: translateY(0);
color: #a52828;
}
50% {
transform: translateY(-10px);
color: #209c4f;
}
}
// 左右动
.thinking-effect {
display: inline-block;
font-size: 18px;
font-weight: bold;
animation: shake 1.2s infinite linear alternate;
color: #ffd700;
.dot {
opacity: 0.2;
animation: blink 1.2s infinite;
font-size: 22px;
margin-left: 2px;
}
.dot1 {
animation-delay: 0s;
}
.dot2 {
animation-delay: 0.3s;
}
.dot3 {
animation-delay: 0.6s;
}
}
@keyframes blink {
0%,
100% {
opacity: 0.2;
}
50% {
opacity: 1;
}
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-2px);
}
40% {
transform: translateX(2px);
}
60% {
transform: translateX(-2px);
}
80% {
transform: translateX(2px);
}
100% {
transform: translateX(0);
}
}
// （左右碰撞效果）
// .bouncing-text {
// display: inline-block;
// font-size: 24px;
// animation: bounce 2s ease-in-out infinite;
// }
// @keyframes bounce {
// 0%,
// 100% {
// transform: translateX(0); /* 起始位置 */
// }
// 25% {
// transform: translateX(-15px); /* 向左移动 */
// }
// 50% {
// transform: translateX(0); /* 回到中间 */
// }
// 75% {
// transform: translateX(15px); /* 向右移动 */
// }
// }
// （左右碰撞效果）效果增强版（带弹性碰撞）
.bouncing-text {
display: inline-block;
font-size: 24px;
animation: bounce 1.5s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
}
@keyframes bounce {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-20px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(20px);
}
}
// 简单钟摆摆动（左右旋转)
.bell-text {
display: inline-block;
font-size: 24px;
transform-origin: top center;
animation: bellSwing 2s ease-in-out infinite;
}
@keyframes bellSwing {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
// 每个字之间来回动
.bells-text {
font-size: 3.5rem;
font-weight: bold;
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
position: relative;
padding: 20px;
}
.bell {
display: inline-block;
transform-origin: top center;
margin: 0 8px;
position: relative;
transition: all 0.2s ease;
}
.bell::after {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 15px;
background: #ffd700;
border-radius: 2px;
}
.bell-1 {
animation: swing1 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.bell-2 {
animation: swing2 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: 0.15s;
}
.bell-3 {
animation: swing3 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: 0.3s;
}
.bell-4,
.bell-5,
.bell-6 {
display: inline-block;
animation: dotBounce 1s ease-in-out infinite;
}
.bell-4 {
animation-delay: 0.1s;
}
.bell-5 {
animation-delay: 0.2s;
}
.bell-6 {
animation-delay: 0.3s;
}
@keyframes swing1 {
0%,
100% {
transform: rotate(-15deg);
}
50% {
transform: rotate(15deg);
}
}
@keyframes swing2 {
0%,
100% {
transform: rotate(12deg);
}
50% {
transform: rotate(-12deg);
}
}
@keyframes swing3 {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
@keyframes dotBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
<style scoped>
</style>
