闪亮效果

￡神魔★判官ぃ 2022-12-03 12:56 103阅读 0赞

html
    <div id="shiny-shadow">
      <button><span>Hover me</span></button>
    </div>
    
    CSS
    #shiny-shadow {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: #1c2541;
    }
    
    button {
      border: 2px solid white;
      background: transparent;
      text-transform: uppercase;
      color: white;
      padding: 15px 50px;
      outline: none;
      overflow: hidden;
      position: relative;
    }
    
    span {
      z-index: 20;
    }
    
    button:after {
      content: '';
        display: block;
        position: absolute;
        top: -36px;
        left: -100px;
        background: white;
        width: 50px;
        height: 125px;
        opacity: 20%;
        transform: rotate(-45deg);
    }
    
    button:hover:after {
      left: 120%;
      transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
       -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c74243a19e8b469787dec2a2b7ec12e7.png

发表评论取消回复

表情：

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

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

相关阅读

相关 IPSEC 002 ---- Internet危机四伏，IPSec闪亮登场

危机四伏随着GRE和L2TP的广泛应用，民间组织天地会也与时俱进，在总舵和各个分舵之间部署了GRE和L2TP。总舵和分舵通过GRE隧道和L2TP隧道传递消息，互通有...

浅浅的花香味﹌/ 2024年04月18日 22:24/ 0 赞/ 76 阅读

相关带闪亮动画的按钮 - 分步指南

超文本标记语言对于 HTML，我们只有一个按钮元素。 <button>Button</button> CSS 对于 CSS，首先我们要设置按钮的样式。

Bertha 。/ 2023年10月13日 15:36/ 0 赞/ 56 阅读

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

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

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

相关闪亮效果

html <div id="shiny-shadow"> <button><span>Hover me</span></button> </

￡神魔★判官ぃ/ 2022年12月03日 12:56/ 0 赞/ 104 阅读

相关涟漪扩散效果（呼吸灯效果）

涟漪扩散效果（呼吸灯效果）整体效果实现思路整体效果涟漪扩散这样多层级向外扩散可调整运动速度 ![在这里插入图片描述]

川长思鸟来/ 2022年11月19日 07:38/ 0 赞/ 293 阅读

相关新书周榜：机器学习、Python、Linux成为最闪亮的星

纵观上周新书表现，机器学习、Python、linux书受到程序员们的喜爱，下面小编就来给你们盘点一下。顺序按榜单顺序排列。 1、机器学习的数学雷明著 ![新书周榜

短命女/ 2022年11月06日 10:52/ 0 赞/ 191 阅读

相关只用 Markdown 就写出好看的简历，在线简历应用闪亮登场！

前言大家都知道金三银四是招聘的季节，各大互联网公司都开始了春招。最近有很多人来找我帮忙看简历，简历的模板可谓参差不齐，有过分炫酷，还有一些朋友直接把 word

╰+哭是因爲堅強的太久メ/ 2022年10月22日 11:48/ 0 赞/ 584 阅读

相关用 AT89C52 使 LED 闪亮的程序

电路：P0.0、P0.1 分别外接一个 LED，输出高电平时，LED 发光。　　　P2.0 外接一个按键。请“不用延时程序”写个这样的程序：当按键不按的时候，

喜欢ヅ旅行/ 2022年08月20日 01:09/ 0 赞/ 143 阅读

相关国内首家源代码搜索引擎闪亮登场

　　经过数日埋头苦干，代码中国的源代码搜索引擎服务终于在今天正式推出。虽然功能还很单一，虽然可搜索的语言还很少，但是我相信，它会逐渐长大，越来越丰富。也能希望所有使用的用户对它

野性酷女/ 2022年03月19日 08:16/ 0 赞/ 194 阅读

相关 Cocos2d-x《雷电大战》(5)-单例模式英雄飞机闪亮登场!

[ 林炳文Evankaka][_Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][http_blog.cs

红太狼/ 2021年09月10日 12:12/ 0 赞/ 225 阅读