一键复制,霓虹灯效果:CSS动画,为设计添彩!

简介: 一键复制,霓虹灯效果:CSS动画,为设计添彩!

先上效果

   


🌟霓虹灯效果是一种能够迅速吸引目光并增添活力的动画技术。本文将分享如何利用CSS动画制作霓虹灯闪烁效果,并提供一键复制的代码,让设计者能够轻松地将这种动态效果融入自己的网页设计中。无论是用于商业网站、个人博客还是创意项目,霓虹灯动画都能为您的作品增添一抹亮色。

   

完整代码

   

HTML

<div class="text-effect-wrapper">
        <!-- The contenteditable attribute means you can type your text right on the page -->
        <h1 class="text" contenteditable>HELLO</h1>
    </div>

CSS代码:


/* Create pseudo elements for both elements */
.text-effect-wrapper,
.text {
&::before,
&::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
}
.text-effect-wrapper {
/* Can be anything light-colored */
--spotlight-color: white;
overflow: hidden;
position: relative;
/* Shimmer animation */
&::before {
    animation: shimmer 5s infinite linear;
    background:
        radial-gradient(circle, var(--spotlight-color), transparent 25%) 0 0 / 25% 25%,
        radial-gradient(circle, var(--spotlight-color), black 25%) 50% 50% / 12.5% 12.5%;
    inset-block-start: -100%;
    inset-inline-start: -100%;
    mix-blend-mode: color-dodge;
    z-index: 3;
}
/* Extra filter to boost colors and contrast */
&::after {
    backdrop-filter: blur(1px) brightness(90%) contrast(150%);
    z-index: 4;
}
}
@keyframes shimmer {
100% {
    transform: translate3d(50%, 50%, 0);
}
}
.text {
/* Mask colors */
/* Should be black and white */
--background-color: black;
--text-color: white;
/* Text color */
/* Can be anything */
--color-1: red;
--color-2: blue;
/* Fuzzy white outline text */
color: transparent;
text-shadow:
    0 0 0.02em var(--background-color),
    0 0 0.02em var(--text-color),
    0 0 0.02em var(--text-color),
    0 0 0.02em var(--text-color);
/* Improve contrast of outline */
&::before {
    backdrop-filter: blur(0.013em) brightness(400%);
    z-index: 1;
}
/* Add text color */
&::after {
    background: linear-gradient(45deg, var(--color-1), var(--color-2));
    mix-blend-mode: multiply;
    z-index: 2;
}
}
/* Alternative styling */
body:has(#option-toggle:checked) {
& .text-effect-wrapper {
    --spotlight-color: orange;
    &::after {
        backdrop-filter: brightness(90%) contrast(150%);
    }
}
& .text {
    --angle: 5deg;
    --color-1: hsl(163, 100%, 51%);
    --color-2: hsl(295, 88%, 32%);
    --color-3: hsl(59, 100%, 50%);
    text-shadow:
        0 0 0.03em var(--background-color),
        0 0 0.03em var(--text-color);
    &::before {
        backdrop-filter: brightness(150%) contrast(200%);
    }
    &::after {
        background: linear-gradient(var(--angle), var(--color-1), var(--color-2), var(--color-3));
        mix-blend-mode: color-dodge;
    }
}
}
/* === Pen styling, ignore */
h1 {
--font-size: clamp(6.25rem, 3.25rem + 15vw, 13.75rem);
font: 700 var(--font-size)/1 "Lato", sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0;
&:empty,
&:focus {
    border: 2px dotted white;
    min-width: 1ch;
    outline-offset: 5px;
}
}
body {
background: black;
display: flex;
height: 50vh;
justify-content: center;
align-content: center;
align-items: center;
}
相关文章
|
19天前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
51 31
|
4天前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
23 6
|
14天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
36 7
|
20天前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
26 6
|
22天前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
47 5
|
19天前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
21 2
|
20天前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总,一共包含126种加载动画效果,不同样式不同图案,简单实用,一览包含所有,会让你在等待的过程中,体验视觉盛宴,给用户不一般的加载体验,欢迎下载试试!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
24 2
|
21天前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
22天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
22 1
|
25天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
43 1