css特效1：流光背景？我不允许你还不会

话不多说先贴图（忽略页面杂乱的背景）

由于视频上传需要审核，所以暂时不展示动态效果。文章介绍的效果和视频均在

https://blog.csdn.net/src_chao1/article/details/128320581?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128320581%22%2C%22source%22%3A%22src_chao1%22%7Dhttps://blog.csdn.net/src_chao1/article/details/128320581?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128320581%22%2C%22source%22%3A%22src_chao1%22%7D

好了，进入正题

首先设置一个基本按钮样式，后续所有的效果都将以改样式为基础

<button class="button streamerLight "><button-span>BUTTON</button-span>
</button>

这里我在button里添加一个自定义标签的原因之后再说

.button {cursor: pointer;/*设置鼠标为指针效果*/width: 300px;height: 60px;margin: 10px 10px 25px;text-align: center;font-size: 14px;border-radius: 20px;background-color: #4e5b69;color: #fff;box-shadow: 0 5px 5px 3px rgba(60, 62, 75, 0.2);position: relative;letter-spacing:5px;/*设置文本内容间距*/
}

.button只是一个默认样式

接下来是渐变色背景

.streamerLight{position: relative;background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);/*渐变色设置*/background-size: 400%;/*设置大小，方便后续的流光效果*/border-radius: 10px;color: #fff;
}

.streamerLight这里面关键代码是渐变色背景和背景大小

linear-gradient是实现渐变色效果代码，详细介绍参考:(98条消息) CSS 的 linear-gradient() 线性渐变函数（带例子）_你好像很好吃a的博客-CSDN博客_linear-gradient

然后让鼠标移动上去后背景移动起来

这时候鼠标移入就会发现背景颜色动起来了，但是并没有光影效果，所以我们接下来设置一个伪元素

.streamerLight::before {content: "";position: absolute;inset: -5px;background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);background-size: 400%;border-radius: 10px;filter: blur(10px);/*模糊效果*/
}

同样让鼠标移入后伪元素也能触发动画

.streamerLight:hover::before {animation: steamer 8s infinite;
}

不过因为添加了伪元素，导致标签内部的文字被覆盖掉了，无法显示，因此设置自定义标签，让文本内容始终悬浮于伪元素之上

button-span {display: inline;position: relative;z-index: 2;
}

现在内容已经能正常显示了

css特效1：流光背景？我不允许你还不会相关推荐

炫彩流光CSS特效按钮
炫彩流光CSS特效按钮教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存 ...
css特效2：流光边框
作为流光系列之一,流光边框和流光背景只有在::after上设置存在区别,所以本文中将不会有与流光背景相同的代码,如果您还没有看流光背景时怎么做的话,建议先看我前面的文章 css特效1:流光背景?我不允 ...
特效html布局,一些好玩的css特效
html5 css3有哪些新特效 html5: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.f ...
【正在完善】高级CSS特效解析其示范案例
高级CSS特效解析其示范案例 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...
全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
历时 10 个多月，学习了这 132 个CSS 特效!
点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github.com/qq449245884/xiaozhi ...
H5+css特效源代码分享：发光分享按钮
H5+css特效源代码分享效果图: 背景光效可以根据使用自己调参考源代码: H5部分 <!DOCTYPE html> <html lang="en">& ...
html怎么制作固定背景,使用CSS制作的页面背景固定和滚动效果
HTML HTML结构很简单,一个class为.cd-fixed-bg的div元素用于放置固定背景图,一个class为.cd-scrolling-bg的div元素用于滚动的部分.我们可以放置多个.cd ...
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...
css实现图片虚化_HTML+CSS入门如何实现背景图片虚化效果
本篇教程介绍了HTML+CSS入门如何实现背景图片虚化效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 需求:一个div设置了background: url,现在需要 ...

css特效1：流光背景？我不允许你还不会

css特效1：流光背景？我不允许你还不会相关推荐

最新文章

热门文章