css阴影实现3D氛围重叠来回闪动文字

整体基架:阴影,
3D重叠文字:一层颜色一层黑色的顺序,形成具有黑色厚度的3D文字的层次感
来回闪动:再通过动画在指定层级更换高亮的颜色

代码示例:

   .container {display: flex;justify-content: center;align-items: center;flex-direction: column;margin: auto;transform: rotateX(25deg) rotateY(-25deg);}.a {color: #88e;text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), /* 黑色的这层阴影,就相当于其他颜色层直接的黑色厚度的视觉效果 */0.04em 0.04em 0 #112,       0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;animation: pulsea 200ms ease infinite alternate;}.b {color: #f99;text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;animation: pulseb 300ms ease infinite alternate;}@keyframes pulsea {0% {text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,0.14em 0.14em 0 #112, /* 改变的阴影颜色 */0.145em 0.145em 0 #aaf; }50% {text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, /* 改变的阴影颜色 */0.095em 0.095em 0 #aaf,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;}75% {text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,/* 改变的阴影颜色 */0.045em 0.045em 0 #aaf, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;}100% {text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.4), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;}}@keyframes pulseb {0% {text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #faa;}50% {text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #faa,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;}75% {text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #faa, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;}100% {text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;}}<div class="container"><p class="a">CSS 3D</p><p class="b">NEON</p><p class="a">EFFECT</p></div>

效果图:

css阴影实现3D氛围重叠来回闪动文字相关推荐

CSS实现的阴影的3D立体文字动画网页源码
大家好,今天给大家介绍一款,炫酷的阴影的3D立体文字动画网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 由两组文字构成,都有阴影,加上左右晃动,3D效果很明显(图2) 图2 响应式页面,支持 ...
css实现图片虚化_什么? CSS 阴影竟然还有这种骚操作？
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 原作者:cocoqiao 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 f ...
CSS 阴影技巧与细节
单侧投影先说单侧投影,关于 box-shadow,大部分时候,我们使用它都是用来生成一个两侧的投影,或者一个四侧的投影.如下: OK,那如果要生成一个单侧的投影呢? 我们来看看 box-shadow ...
你可能不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧[1],介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS- ...
【详解】CSS阴影用法——Web前端系列学习笔记
3. CSS阴影和渐变盒阴影对象选择器 {box-shadow:投影方式|| X轴偏移量|| Y轴偏移量 ||阴影模糊半径 || 阴影扩展半径 ||阴影颜色 } 投影方式:此参数是一个可选值,如果 ...
css阴影属性_第三场阴影场与属性访问器接口
css阴影属性这是" 影子字段与属性访问器"界面的第3轮 . 如果您是新手,但不确定要怎么做,请查看我以前的文章或关于开发JavaFX应用程序时节省内存的第一篇文章 . 作为J ...
css 文字重叠_html网页文字重叠字体叠加显示css如何解决
DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? CSS+DIV布局ul li列表文字内容,当文字比较多时,上排文字重叠在下排li标签内文字上这是什么原因?如何解决css文字重叠呢? 内容较 ...
html5如何让多张图片重叠,css怎么让两张图片重叠？
css怎么让两张图片重叠?下面本篇文章给大家介绍一下使用CSS让两张图片重叠的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让两张图片重叠? 想要使用css把两个图 ...
使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...

css阴影实现3D氛围重叠来回闪动文字

css阴影实现3D氛围重叠来回闪动文字相关推荐

最新文章

热门文章