css特效2：流光边框

作为流光系列之一，流光边框和流光背景只有在::after上设置存在区别，所以本文中将不会有与流光背景相同的代码，如果您还没有看流光背景时怎么做的话，建议先看我前面的文章

css特效1：流光背景？我不允许你还不会_雪碧瓶子用一年的博客-CSDN博客https://blog.csdn.net/src_chao1/article/details/128319687?spm=1001.2014.3001.5501

好了，下面我们看一下效果图

正常状态：

鼠标移入

鼠标按下

可以看到与之前流光背景的区别就在于按钮内部的颜色并不是流光效果，那是因为我们在按钮上又添加了伪元素::after，遮住了在::before中的流光效果。

代码部分

.streamerLightBorder::after {content: "";position: absolute;inset: 5px;background: #4e5b69;background-size: 400%;border-radius: 10px;filter: blur(10px);
}
.streamerLightBorder:active::after {background:  linear-gradient(to right, #f16443, #eeba45, #ef6297, #ec3636);background-size: 400%;
}

.streamerLightBorder选择器就是流光边框需要单独用到的代码,其中:acive是给按下鼠标后::after显示样式，再加上一篇的全部代码就会显示出流光边框的效果

css特效2：流光边框相关推荐

炫彩流光CSS特效按钮
炫彩流光CSS特效按钮教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存 ...
纯CSS3流光边框特效
实现原理: div的before元素当成左边框内部一个class=bottom的i标签当下边框 div的after元素当成右边框内部一个class=top的i标签当上边框效果图: 原理图: 左边 ...
Unity ShaderLab特效教程适用于贴图、sprite和ugui的2d着色器实例代码+详解注释【2d流光边框效果】
如果代码中有什么不清楚请查看以下基础知识 Shader基础知识 unity3d 中七种坐标知识详解 2d流光边框效果可以自定义边框的高和宽,流光尺寸和速度以及中心点笑狗图: 代码 Shader ...
【正在完善】高级CSS特效解析其示范案例
高级CSS特效解析其示范案例 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...
css特效文件,CSS样式特效演示文件修改版.ppt
CSS样式特效演示文件修改版第五章 CSS样式特效回顾详述getElementById( )的主要功能详述getElementsByName( )的主要功能简述制作浮动广告图片的实现思路简 ...
历时 10 个多月，学习了这 132 个CSS 特效!
点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github.com/qq449245884/xiaozhi ...
ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
css控制边界与边框示例(内边距、外边距使用方法)
这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比元件下端边线的空隙 p ...
特效html布局,一些好玩的css特效
html5 css3有哪些新特效 html5: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.f ...

css特效2：流光边框

css特效2：流光边框相关推荐

最新文章

热门文章