如何使用纯CSS实现文本的淡入动画效果(附源码)
程序员文章站
2022-03-31 09:07:41
...
本篇文章给大家带来的内容是关于如何使用纯CSS实现文本的淡入动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含若干子元素,每个子元素是 1 个字母:
<div class="container"> <span>h</span> <span>a</span> <span>p</span> <span>p</span> <span>y</span> <span> </span> <span>h</span> <span>o</span> <span>l</span> <span>i</span> <span>d</span> <span>a</span> <span>y</span> <span>s</span> </div>
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(pink, white, pink); }
设置字体样式:
.container span { display: inline-block; color: purple; font-weight: bold; text-transform: uppercase; font-size: 40px; }
定义文字从左到右的移动效果:
.container span { animation: sideSlide 4s forwards infinite; transform: translateX(-100vw); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em); } 24% { transform: translateX(0); } 25%, 75% { transform: translateX(0); } 90%, 100% { transform: translateX(100vw); } }
增加文字缩放的动画效果:
.container span { transform: translateX(-100vw) scale(0); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); } 24% { transform: translateX(0) scale(1.2); } 25%, 75% { transform: translateX(0) scale(1); } 90%, 100% { transform: translateX(100vw) scale(0); } }
增加文字入场和出场时的淡入淡出效果:
.container span { filter: opacity(0); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); } 24% { transform: translateX(0) scale(1.2); } 25%, 75% { transform: translateX(0) scale(1); filter: opacity(1); } 90%, 100% { transform: translateX(100vw) scale(0); filter: opacity(0); } }
增加文字变色的效果:
@keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); color: purple; } 24% { transform: translateX(0) scale(1.2); color: cyan; } 25%, 75% { transform: translateX(0) scale(1); filter: opacity(1); color: purple; } 90%, 100% { transform: translateX(100vw) scale(0); filter: opacity(0); } }
设置子元素的下标变量:
.container span:nth-child(1) { --n: 1; } .container span:nth-child(2) { --n: 2; } .container span:nth-child(3) { --n: 3; } .container span:nth-child(4) { --n: 4; } .container span:nth-child(5) { --n: 5; } .container span:nth-child(6) { --n: 6; } .container span:nth-child(7) { --n: 7; } .container span:nth-child(8) { --n: 8; } .container span:nth-child(9) { --n: 9; } .container span:nth-child(10) { --n: 10; } .container span:nth-child(11) { --n: 11; } .container span:nth-child(12) { --n: 12; } .container span:nth-child(13) { --n: 13; } .container span:nth-child(14) { --n: 14; }
设置子元素的动画延时:
.container span { animation-delay: calc((var(--n) - 1) * 0.05s); }
大功告成!
以上就是如何使用纯CSS实现文本的淡入动画效果(附源码)的详细内容,更多请关注其它相关文章!
推荐阅读
-
如何使用CSS实现眼冒金星的动画效果(附源码)
-
css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
-
css如何实现水纹扩散的动画效果(纯代码)
-
如何使用纯css实现手机通讯录的效果
-
如何使用纯CSS实现一块乐高积木(附源码)
-
如何使用纯CSS实现一把雨伞开合的动画效果(附源码)
-
如何使用css3实现文字的单阴影效果和多重阴影效果(附完整代码)
-
如何使用css实现翻转图片的效果(附代码)
-
如何使用纯CSS实现棋盘的错觉动画(附源码)
-
如何使用纯CSS实现一张纪念卓别林的卡片(附源码)