css实现很炫酷的效果(纯CSS实现酷炫的霓虹灯效果附demo)
类别:Web前端 浏览量:913
时间:2021-10-26 11:32:01 css实现很炫酷的效果
纯CSS实现酷炫的霓虹灯效果附demo最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效。其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享。
这是要实现的效果:
可以看到,在鼠标移入按钮的时候,会产生类似霓虹灯光的效果;在鼠标移出按钮的时候,会有一束光沿着固定的轨迹(按钮外围)运动。
霓虹灯光的实现霓虹灯光的实现比较简单,用多重阴影来做即可。我们给按钮加三层阴影,从内到外每层阴影的模糊半径递增,这样的多个阴影叠加在一起,就可以形成一个类似霓虹灯光的效果。这段的代码如下:
HTML:
<li class="light"> Neon Button </li>
CSS:
body { background: #050901; } .light { width: fit-content; padding: 25px 30px; color: #03e9f4; font-size: 24px; text-transform: uppercase; transition: 0.5s; letter-spacing: 4px; cursor: pointer; } .light:hover { background-color: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; }
最终的效果如下:
运动光束的实现虽然看起来只有一个光束沿着按钮的边缘运动,但实际上这是四个光束沿着不同方向运动之后叠加的效果。它们运动的方向分别是:从左往右、从上往下、从右往左、从下往上,如下图所示:
在这个过程中,光束和光束之间产生了交集,如果只看按钮的边缘部分,就很像是只有一个光束在做顺时针方向的运动。
下面是具体实现中几个需要注意的点:
- 四个光束分别对应 li.light 的四个子 li,初始位置分别是在按钮的最左侧、最上方、最右侧和最下方,并按照固定的方向做重复的运动
- 每个光束的高度或宽度都很小(只有 2px),并且都有一个从透明色到霓虹色的渐变,因此外表会有一个收束的效果(即看上去不是一条完整的线条)
- 为了确保我们看到的是一个顺时针方向的运动,四个光束的运动实际上是有序的,首先是按钮上方的光束开始运动,在一段时间后,右侧的光束运动,在一段时间后,下方的光束运动,在一段时间后,左侧的光束运动。光束和光束之间的运动有一个延迟,以上方和右侧的光束为例,如果它们同时开始运动,由于右侧的运动距离小于上方的运动距离,就会导致这两个光束错过相交的时机,我们看到的就会是断开的、不连贯的光束。既然右侧光束的运动距离比较短,为了让上方光束可以“追上”它,我们就得让右侧光束“延迟出发”,因此要给它一个动画延迟;同理,剩余两个光束也要有一个动画延迟。多个动画延迟之间大概相差 0.25 秒即可。
- 只需要显示按钮边缘的光束就够了,因此给 li.light 设置一个溢出隐藏
代码如下:
HTML:
<li class="light"> <li></li> <li></li> <li></li> <li></li> Neon Button </li>
CSS:
.light { position: relative; padding: 25px 30px; color: #03e9f4; font-size: 24px; text-transform: uppercase; transition: 0.5s; letter-spacing: 4px; cursor: pointer; overflow: hidden; } .light:hover { background-color: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; } .light li { position: absolute; } .light li:nth-child(1){ width: 100%; height: 2px; top: 0; left: -100%; background: linear-gradient(to right,transparent,#03e9f4); animation: animate1 1s linear infinite; } .light li:nth-child(2){ width: 2px; height: 100%; top: -100%; right: 0; background: linear-gradient(to bottom,transparent,#03e9f4); animation: animate2 1s linear infinite; animation-delay: 0.25s; } .light li:nth-child(3){ width: 100%; height: 2px; bottom: 0; right: -100%; background: linear-gradient(to left,transparent,#03e9f4); animation: animate3 1s linear infinite; animation-delay: 0.5s; } .light li:nth-child(4){ width: 2px; height: 100%; bottom: -100%; left: 0; background: linear-gradient(to top,transparent,#03e9f4); animation: animate4 1s linear infinite; animation-delay: 0.75s; } @keyframes animate1 { 0% { left: -100%; } 50%,100% { left: 100%; } } @keyframes animate2 { 0% { top: -100%; } 50%,100% { top: 100%; } } @keyframes animate3 { 0% { right: -100%; } 50%,100% { right: 100%; } } @keyframes animate4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }
这样就可以达到文章开头图片的效果了。
不同颜色的霓虹灯如果想要其它颜色的霓虹灯光效果怎么办呢?是否需要把相关的颜色重新修改一遍?其实我们有更简单的方法,就是使用 filter:hue-rotate(20deg) 一次性修改 li.light 和内部所有元素的色相/色调。
The hue-rotate() CSS function rotates the hue of an element and its contents.
最终效果如下:
到此这篇关于纯CSS实现酷炫的霓虹灯效果(附demo)的文章就介绍到这了,更多相关CSS霓虹灯 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css中三角标(使用css实现三角符号效果)
- css怎么让div整体居中(CSS实现DIV居中的三种方法)
- 网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)
- 如何编写更好的CSS
- 纯css实现多级菜单(纯CSS实现可折叠树状菜单)
- css怎么给背景颜色设置模糊(CSS设置背景图片模糊内容不模糊的解决方法)
- sas编程如何加标签(sassscss的安装与使用教程)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- css3各个动画效果(使用css3制作齿轮loading动画效果)
- css用什么设置透明度(详解css透明度之rgba和opacity的区别及兼容)
- css动画的性能(你所不知道的 CSS 动画技巧与细节)
- css基线实例详解(移动端使用 rem 单位时 css sprites 定位问题的解决)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- css画三角形几种方法(利用CSS绘制任意角度的扇形示例代码)
- css垂直居中16个方法(css实现元素垂直居中的常用方法总结)
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
热门推荐
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- sqlserver创建表结构时添加约束(SQL Server 通过with as方法查询树型结构)
- 欧洲云服务器和VPS有哪些区别?(欧洲云服务器和VPS有哪些区别?)
- 随意化快排python算法(python快排算法详解)
- laravel模型详解(laravel config文件配置全局变量的例子)
- 在linux系统中切换成其他用户(如何在Linux命令行与其他用户通信)
- Visual Studio 调试方法
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- group by是底层如何实现分组的(group by 按某一时间段分组统计并查询推荐)
- 链式编程jquery(实例详解jQuery的链式编程风格)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9