纯 CSS 实现炫酷背景霓虹灯文字效果
如图所示,这是一个很炫酷的霓虹灯文字效果且背景炫酷,就像很多个灯光闪烁着不同的颜色。
本次文章将解析如何用 CSS 代码实现这个效果,根据上面的动图分析出我们要实现的几个主要功能点:
整个背景中有平均分布的小点衬托中心区域
文字闪烁效果如同霓虹灯一样
文字背景呈多个平均分布的亮点
背景亮点的颜色整体呈现渐变色变化
1. 默认背景色
首先我们来看看如何通过 CSS 创建一个多个小点背景效果。
1.1 设置根元素变量
在:root
伪类中,定义了一系列的 CSS 变量,这些变量在整个文档中都是可用的。例如,--rotate
用于控制旋转动画的角度,而--radius
、--bg
、--width
等用于定义背景和形状的基本属性。
1.2 设计背景样式
在body
标签中设置了背景的基础样式,使用了径向渐变(radial-gradient
)来创建一种特殊的纹理效果。配合 background-size
和 background-position
即可完成默认的背景效果。
此时的背景效果如下:
2. 创建渐变背景旋转效果
2.1 旋转动画的实现
新增.back
类利用conic-gradient
来创建一个彩色圆环效果,而--rotate
变量控制着这个圆环的旋转。这种效果通过@keyframes spin
动画实现,其中--rotate
的值在一定周期内从0deg
变化到360deg
,实现了一个完整的旋转周期。
如果这里仅设置 conic-gradient
并配合 animation
动画的效果就是下面的样子:
但是再增加一个 radial-gradient
径向渐变并设置 background-size
为 5vmin 5vmin
的显示区域。
完成后的效果图:
这里需要注意的一点就是多个渐变设置的顺序,这里的 conic-gradient
要放置在后面才能完成这个效果。这种旋转效果不仅增加了页面的视觉吸引力,而且通过颜色的流动变换,为用户提供了一种动态的互动体验。它不仅是一种美学上的选择,也展示了 CSS 动画和渐变的强大功能。
2. 霓虹灯文字效果
接下来探讨如何实现背景中的霓虹灯文字效果。
2.1 文本的动态阴影效果
通过设置text-shadow
属性,并使用自定义变量--color1
到--color4
,为文本创建了动态的阴影效果。
2.2 文本动画效果
基于添加好的阴影效果进一步增加动画效果,模拟灯光闪烁的效果,在动画中调整阴影的颜色和大小在一定时间内变化,从而产生动态效果。
flicker
动画为文本添加了一个颜色和滤镜的变化效果。在动画的 50%时刻,文本的颜色变为白色,同时增加滤镜的饱和度和色调发生变化,创建了一种“闪烁”效果。
3. 悬停效果:增强用户交互
最后进一步增加用户的交互体验,当鼠标悬停的时候增加背景边框效果。.gd:hover
选择器用于定义当鼠标悬停在元素上时的样式变化。默认边框不可见,在这里当鼠标悬停时,--border
变量的值从0
变为1
,给元素添加了边框效果,从而增强了用户的交互体验。
增加悬停交互后的效果:
结语
本文详细解析了如何利用 CSS 的来创造炫酷动态渐变背景和霓虹灯文字效果。这种动效不仅对于前端开发者有启发,也为设计师和内容创作者提供了新的视角,去探索网页设计的无限可能性。
通过这段 CSS 代码的解析,我们可以看到 CSS 不仅是用来定义网页的基本样式,还可以创建复杂的视觉效果和动画。这些技术不仅提高了网页的美观性,还增强了用户的交互体验。随着前端技术的不断发展,我们可以期待更多创新的设计和实现,为网页带来更加丰富和动态的视觉效果。
关注公众号回复【 20231203
】可获取完整源代码~
参考
codepen.io/ghaste/pen/NWobwWb
codepen.io/erikjung/pen/XdWEKE
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/bb8e4a1399f68477a3fe57fc2】。文章转载请联系作者。
评论