如何使用纯CSS实现彩虹条纹文字的效果(附代码)
程序员文章站
2022-03-25 14:12:34
...
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含文本,并且包含4个 <span> 用于特效,<span> 的 data-text 属性值为与文本相同:
<p class="rainbow"> web <span data-text="web"></span> <span data-text="web"></span> <span data-text="web"></span> <span data-text="web"></span> </p>
居中显示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background: black; }
定义文本样式:
.rainbow { color: white; font-size: 300px; text-transform: uppercase; font-family: sans-serif; font-weight: bold; line-height: 1em; position: relative; }
用伪元素增加图层,形成彩虹效果:
.rainbow span::before, .rainbow span::after { content: attr(data-text); position: absolute; top: 0; left: 0; overflow: hidden; } .rainbow span:nth-child(1)::before { color: orchid; z-index: 1; height: calc(100% - 10% * 1); } .rainbow span:nth-child(1)::after { color: mediumpurple; z-index: 2; height: calc(100% - 10% * 2); } .rainbow span:nth-child(2)::before { color: deepskyblue; z-index: 3; height: calc(100% - 10% * 3); } .rainbow span:nth-child(2)::after { color: cyan; z-index: 4; height: calc(100% - 10% * 4); } .rainbow span:nth-child(3)::before { color: mediumspringgreen; z-index: 5; height: calc(100% - 10% * 5); } .rainbow span:nth-child(3)::after { color: yellow; z-index: 6; height: calc(100% - 10% * 6); } .rainbow span:nth-child(4)::before { color: gold; z-index: 7; height: calc(100% - 10% * 7); } .rainbow span:nth-child(4)::after { color: tomato; z-index: 8; height: calc(100% - 10% * 8); }
增加动画效果:
.rainbow span::before, .rainbow span::after { animation: animate 0.8s infinite alternate; filter: opacity(0); } @keyframes animate { from { filter: opacity(0); } to { filter: opacity(1); } }
为图层设置延时,增强动感:
.rainbow span:nth-child(1)::before { animation-delay: calc(0.8s - 0.1s * 1); } .rainbow span:nth-child(1)::after { animation-delay: calc(0.8s - 0.1s * 2); } .rainbow span:nth-child(2)::before { animation-delay: calc(0.8s - 0.1s * 3); } .rainbow span:nth-child(2)::after { animation-delay: calc(0.8s - 0.1s * 4); } .rainbow span:nth-child(3)::before { animation-delay: calc(0.8s - 0.1s * 5); } .rainbow span:nth-child(3)::after { animation-delay: calc(0.8s - 0.1s * 6); } .rainbow span:nth-child(4)::before { animation-delay: calc(0.8s - 0.1s * 7); } .rainbow span:nth-child(4)::after { animation-delay: calc(0.8s - 0.1s * 8); }
最后,把原始文本设置为透明色:
.rainbow { color: transparent; }
大功告成!
相关推荐:
如何使用纯CSS实现带有金属光泽的立体按钮的动画效果(附源码)以上就是如何使用纯CSS实现彩虹条纹文字的效果(附代码)的详细内容,更多请关注其它相关文章!
推荐阅读
-
如何使用CSS实现鼠标上移图标旋转效果的图文代码详解
-
如何使用CSS实现眼冒金星的动画效果(附源码)
-
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享
-
css3使用animation属性实现背景颜色动态渐变的效果(附代码)
-
css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
-
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享
-
如何使用JavaScript实现选中文字提示新浪微博分享效果的示例代码分享
-
css如何实现水纹扩散的动画效果(纯代码)
-
css如何实现中间文字,两边横线的标题效果?(代码示例)
-
如何使用纯css实现手机通讯录的效果