css3 实现10种炫酷的文字动画

当然！以下是10种炫酷的文字动画效果，使用CSS3实现。你可以将这些代码放入HTML和CSS文件中以查看效果。 1. 渐变文字 ```html <div class="gradient-text">渐变文字</div> ``` ```css .gradient-text { font-size: 50px; background: linear-gradient(90deg, #ff007f, #7f00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ``` 2. 抖动动画 ```html <div class="shake-text">抖动文字</div> ``` ```css @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } .shake-text { display: inline-block; font-size: 50px; animation: shake 0.5s infinite; } ``` 3. 跳跃动画 ```html <div class="jump-text">跳跃文字</div> ``` ```css @keyframes jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .jump-text { display: inline-block; font-size: 50px; animation: jump 1s infinite; } ``` 4. 循环旋转 ```html <div class="rotate-text">旋转文字</div> ``` ```css @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate-text { display: inline-block; font-size: 50px; animation: rotate 2s linear infinite; } ``` 5. 渐显文字 ```html <div class="fade-in-text">渐显文字</div> ``` ```css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in-text { font-size: 50px; animation: fadeIn 2s forwards; } ``` 6. 文字轮播 ```html <div class="marquee">轮播文字效果 Wow!</div> ``` ```css .marquee { display: inline-block; font-size: 50px; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } ``` 7. 字母分开动画 ```html <div class="letter-spacing">字母分开</div> ``` ```css .letter-spacing { font-size: 50px; display: inline-block; overflow: hidden; white-space: nowrap; animation: spacing 2s forwards; } @keyframes spacing { 0% { letter-spacing: 0; } 100% { letter-spacing: 10px; } } ``` 8. 3D旋转效果 ```html <div class="rotate-3d">3D效果文字</div> ``` ```css .rotate-3d { font-size: 50px; perspective: 1000px; } .rotate-3d:hover { transform: rotateY(180deg); transition: transform 1s; } ``` 9. 脉动效果 ```html <div class="pulse-text">脉动文字</div> ``` ```css @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .pulse-text { font-size: 50px; animation: pulse 1.5s infinite; } ``` 10. 翻转卡片效果 ```html <div class="flip-text">翻转文字</div> ``` ```css .flip-text { font-size: 50px; perspective: 1000px; } .flip-text:hover { transform: rotateX(180deg); transition: transform 0.7s; } ``` 将这些代码放入一个简单的HTML文件中即可查看效果。你可以根据需要调整动画效果的持续时间、颜色和大小等属性。希望你喜欢这些炫酷的文字动画效果！ [2024-08-21 11:24:33 | AI写代码神器 | 2036点数解答]