js和css3带反光特效的按钮插件

所属分类:UI,其他-悬停,动画效果

 18021  224  查看评论 (2)
分享到微信朋友圈
X
js和css3带反光特效的按钮插件 ie兼容12

更新时间:2019-11-27 23:50:11

Reveal Effect library

将显示效果应用于元素的边框和背景。

使用方法

在页面中引入fluent-reveal-effect.css文件和fluent-reveal-effect.js文件。

<link href="css/fluent-reveal-effect.css" rel="stylesheet">          
<script type="text/javascript" src="js/fluent-reveal-effect.js"></script>

HTML

使用一个<button>原始在页面中创建一个按钮。

<button class="btn">按钮</button>

CSS样式

然后为按钮添加下面的CSS样式。

.btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 1rem 2rem;
  background-color: #333;
  color: #fff;
  border: 0;
   
  transition: all 200ms ease;
}
.btn-border {
  display: inline-block;
  margin: 5px;
}
.btn-border .btn {
  display: block;
  margin: 2px;
}

初始化插件

最后通过下面的方法来初始化该反光特效的按钮插件。

FluentRevealEffect.applyEffect(".btn", {
  lightColor: "rgba(255,255,255,0.1)",
  gradientSize: 150
})

如果需要制作点击时的点击波效果,可以使用clickEffect参数。

FluentRevealEffect.applyEffect(".btn", {
  clickEffect: true
})

如果想制作按钮边框的光亮效果,HTML代码和js代码如下:

HTML

<div class="effect-group-container">
    <div class="btn-border">
        <button class="btn">Button 2</button>
    </div>
    <div class="btn-border">
        <button class="btn">Button 3</button>
    </div>
    <div class="btn-border">
        <button class="btn">Button 4</button>
    </div>
</div>

JavaScript

FluentRevealEffect.applyEffect(".effect-group-container", {
  clickEffect: true,
  lightColor: "rgba(255,255,255,0.6)",
  gradientSize: 80,
  isContainer: true,
  children: {
    borderSelector: ".btn-border",
    elementSelector: ".btn",
    lightColor: "rgba(255,255,255,0.3)",
    gradientSize: 150
  }
})
相关插件-悬停,动画效果

jQuery图片边框线条动画效果

本案例的主要效果是鼠标悬停在图片上,从其中的两个角分别延伸出两条线 类似两条河流交汇的效果
  悬停
 39199  436

css3 tranfm鼠标悬停旋转

jquery加css3实现 tranfm鼠标悬停旋转效果
  悬停
 32611  426

jquery hover鼠标滑过图片半透明文字标题滑动显示隐藏

jquery hover鼠标滑过图片半透明文字标题滑动显示隐藏
  悬停
 45244  370

js鼠标滑过方向感效果

js鼠标滑过方向感知三维立方体动画
  悬停
 31071  473

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ζ??Taurus° 0
    2019/11/28 10:09:10
    可以的,看着还不错 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复