22.纯 CSS 创作出美丽的彩虹条纹文字

原文地址：https://segmentfault.com/a/1190000014858628

感想：利用四个span的::before 和 ::after创出多个WEB，给其颜色，绝对定位，再利用z-index: n；突出显示的优先级。

HTML代码：

<html><head><link rel="stylesheet" href="index.css"></head><body><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></body>
</html>

CSS代码：

html, body {margin: 0;padding: 0;height: 100%;display: flex;justify-content: center;align-items: 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;
}

posted on 2019-01-14 16:32 人生与戏阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10267593.html

22.纯 CSS 创作出美丽的彩虹条纹文字相关推荐

24.纯 CSS 创作出平滑的层叠海浪特效
24.纯 CSS 创作出平滑的层叠海浪特效原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. ...
如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
如何用纯 CSS 创作出平滑的层叠海浪特效
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/JvmBdE 可交互视频教 ...
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效原文地址:https://segmentfault.com/a/1190000015126240 HTML code: <div cl ...
css动态彩虹背景,59.纯 CSS 创作彩虹背景文字
感想: 又一次见识到CSS的强大之处,当然MDN文档也是666: HTML code: thanks CSS code: html, body { margin:; padding:; } /* 设置 ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
79.纯 CSS 创作单元素麦当劳金拱门 Logo（原文）
79.纯 CSS 创作单元素麦当劳金拱门 Logo(原文) 1. 效果图: 效果地址:https://codepen.io/flyingliao/pen/JgavjX 原理:m是伪元素::before ...
73.纯 CSS 创作一只卡通狐狸
73.纯 CSS 创作一只卡通狐狸原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6E ...
79.纯 CSS 创作单元素麦当劳金拱门 Logo（自创）
79.纯 CSS 创作单元素麦当劳金拱门 Logo(自创) 效果地址:https://scrimba.com/c/cN3P6nfr 原理:两个椭圆,颜色部分为边框,下一半被伪元素覆盖. 感想:看了一眼 ...

22.纯 CSS 创作出美丽的彩虹条纹文字

22.纯 CSS 创作出美丽的彩虹条纹文字相关推荐

最新文章

热门文章