css特效之流光按钮

ゞ浴缸里的玫瑰 2022-11-27 10:13 307阅读 0赞

话不多说 ，直接上代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue生命周期学习</title>
      <style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-height: 90px; text-align: center; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 60px; z-index: 1; } .btn:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background-position: 0%; } 100% { background-position: 400%; } } .btn::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: 0.5s; } .btn:hover::before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; } </style>
    </head>
    <body>
      <a href="#" class="btn">button</a>
    </body>
    </html>

效果：

![aHR0cHM6Ly9waWMuZG93bmsuY2MvaXRlbS81ZjM1MDgzZTE0MTk1YWE1OTQ0YWM4ODQuZ2lm][]

更多惊喜：[传送门][Link 1]

[aHR0cHM6Ly9waWMuZG93bmsuY2MvaXRlbS81ZjM1MDgzZTE0MTk1YWE1OTQ0YWM4ODQuZ2lm]: /images/20221124/a36c16f46a2c4ee0998effad4dc0cfc9.png
[Link 1]: https://aqingya.cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 按钮悬停效霓虹灯特效

css 按钮悬停效霓虹灯特效 ![在这里插入图片描述][20210418204036337.gif_pic_center] <!DOCTYPE html>

柔情只为你懂/ 2023年01月13日 10:56/ 0 赞/ 193 阅读

相关 ProcessingJoy —— 字符流光路径特效【JAVA】【GLSL】

效果图 ![20210118011146786.gif][] 复杂的效果1 ![20210118011216659.gif][] 复杂的效果2【GIF 颜色量化有损失】

小鱼儿/ 2023年01月06日 11:43/ 0 赞/ 198 阅读

相关 119.css按钮边框渐变发光特效

效果 (源码网盘地址在最后) ![51272696f1bf99f56cb31bfb3f84e75d.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

刺骨的言语ヽ痛彻心扉/ 2022年12月28日 12:38/ 0 赞/ 136 阅读

相关 118.CSS3按钮悬停闪亮特效

效果 (源码网盘地址在最后) ![aaadaf92b40fabac7a9a30ff1cbdd461.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

傷城~/ 2022年12月28日 12:38/ 0 赞/ 164 阅读

相关炫彩流光按钮 html+css

话不多，先上效果： ![1][] 简介：用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。具体步骤： 1.先定义一个盒子当做按钮，如我

桃扇骨/ 2022年12月28日 11:16/ 0 赞/ 134 阅读

相关 css特效之流光按钮

话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse

ゞ浴缸里的玫瑰/ 2022年11月27日 10:13/ 0 赞/ 308 阅读

相关 6分钟实现CSS炫光倒影按钮 html+css

话不多，先看效果：回归老本行，继续分享简单有趣的CSS创意特效，放松放松心情~ ![在这里插入图片描述][20210526005734246.gif_pic_cen

╰半夏微凉°/ 2022年10月15日 14:59/ 0 赞/ 173 阅读

相关如何用纯 CSS 创作六边形按钮特效

![1504647-20181121124251835-466701548.png][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前

以你之姓@/ 2022年04月15日 04:08/ 0 赞/ 250 阅读

相关 CSS实现超级炫酷的流光按钮效果

今天从小破站看了一个大神的作品，感觉好流批，自己忍不住也做了一下。是完全用css实现流光特效，鼠标放在上面会有光波流动这是鼠标没放在上面的颜色，放在上面的颜色太炫酷了

ゞ浴缸里的玫瑰/ 2021年07月27日 00:22/ 0 赞/ 908 阅读

相关 uniapp 仿支付宝首页流光按钮效果流光动画实现

支付宝流光按钮效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

迈不过友情╰/ 2021年07月25日 23:35/ 0 赞/ 631 阅读