css灯光效果,css炫酷特效

　　最近关注了油管上的CSS动画特效教程系列，里面介绍了很多有趣的CSS动态特效。第一个是酷炫的霓虹效果。下面简单记录和分享一下实现思路。

　　这是要达到的效果：

　　可以看到，当鼠标移入按钮时，会产生类似霓虹灯的效果；当鼠标移出按钮时，一束光线会沿着固定的轨迹(按钮的外围)移动。

霓虹灯光的实现

　　霓虹灯很容易实现，用多重阴影就可以了。我们给按钮添加了三层阴影，每层阴影的模糊半径从内到外递增。这样的多重阴影可以叠加在一起，形成类似霓虹灯的效果。这段代码如下：

　　HTML:

　　div class=light 霓虹灯按钮/divCSS:

　　正文{背景：# 050901；}.轻{ width:fit-content；填充：25px 30px颜色：# 03e 9 f 4；字体大小：24px文本转换：大写；过渡：0.5s字母间距：4px光标：指针；}.light:hover { background-color:# 03e 9 f 4；颜色：# 050801；盒影：0 0 5px #03e9f4，0 0 25px #03e9f4，0 0 50px #03e9f4，0 0 200 px # 03e 9 f 4；}最终效果如下：

运动光束的实现

　　虽然看起来只有一条光束沿着按键边缘移动，但实际上是四条光束向不同方向移动的叠加效果。它们的运动方向是：从左到右、从上到下、从右到左、从下到上，如下图所示：

　　在这个过程中，光束之间有一个交点。如果你只看按钮的边缘，就好像只有一个光束在顺时针方向移动。

　　以下是具体实施中需要注意的几点：

　　这四个光束对应div.light的四个子div，它们的初始位置在按钮的最左边、最上面、最右边和最下面，它们在固定的方向上重复移动。每束的高度或宽度都很小(只有2px)，从透明色到霓虹色有一个渐变。所以外观会有收敛的效果(就是看起来不像一条完整的线)。为了确保我们看到的是顺时针方向的运动，四根梁的运动实际上是有序的。首先，按钮上方的横梁开始移动。一段时间后，右边的梁移动，下面的梁移动，左边的梁移动。波束与波束之间存在延迟。举个例子，如果上方和右侧的光束同时开始移动，由于右侧的移动距离小于上方，两个光束就会错过相交的机会，我们看到的将是断开的、不相干的光束。由于右光束的移动距离比较短，为了让上光束“追上”它，我们不得不“延迟”右光束的离开，所以要给它一个动画延迟；类似地，剩余的两个光束应该有动画延迟。多个动画延迟之间的差异约为0.25秒。只显示按钮边缘的光束就够了，所以为div.light设置一个溢出隐藏代码如下：

　　HTML:

　　div class= light div/div div/div div/div霓虹灯按钮/divCSS:轻{位置：相对；填充：25像素30像素颜色：# 03e 9 F4；字体大小：24px文本转换：大写；过渡：0.5秒字母间距：4px光标：指针；溢出：隐藏；}.light:hover { background-color:# 03e 9 F4；颜色：# 050801;盒影：0 0 5px #03e9f4，0 0 25px #03e9f4，0 0 50px #03e9f4，0 0 200 px # 03e 9 f 4；}.轻部门{位置：绝对；}.light div:n-child(1){ width:100%；高度：2px top:0；左：-100%;背景：线性渐变（向右，透明，# 03e 9 f 4)；动画：动画1 1s线性无限；}.轻div:n-child(2){ width:2px；身高：100%;顶：-100%;右：0;背景：线性渐变（到底部，透明，# 03e 9 f 4)；动画：动画2 1s线性无限；动画-延迟：0.25秒；}.轻div:n-子(3){宽度：100%；高度：2px底部：0;右：-100%;背景：线性渐变（向左，透明，# 03e 9 f 4)；动画：动画3 1s线性无限；动画-延迟：0.5s}。轻div:n-child(4){ width:2px；身高：100%;底部：-100%;左：0;背景：线性渐变（到顶部，透明，# 03e 9 f 4)；动画：动画4 1s线性无限；动画-延迟：0.75秒；} @关键帧动画1 { 0% { left:-100%；} 50%,100% {左：100%;} } @关键帧动画2 { 0% { top:-100%；} 50%，100% { top:100%；} } @关键帧动画3 { 0% {右：-100%；} 50%,100% {右：100%;} } @关键帧动画4 { 0% { bottom:-100%；} 50%,100% {底部：100%;}}这样就可以达到文章开头图片的效果了。

不同颜色的霓虹灯

　　 如果想要其它颜色的霓虹灯光效果怎么办呢？是否需要把相关的颜色重新修改一遍？其实我们有更简单的方法，就是使用滤镜：色调-旋转(20度)一次性修改灯光分区和内部所有元素的色相/色调。

　　函数的作用是：旋转一个元素及其内容的颜色。

　　最终效果如下：

　　到此这篇关于纯半铸钢钢性铸铁(铸造半钢)实现酷炫的霓虹灯效果（附演示)的文章就介绍到这了，更多相关半铸钢钢性铸铁(铸造半钢)霓虹灯内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。