当前位置：首页 > 网页特效 > 按钮特效

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

分类：按钮特效日期：2024-05-14 点击(4) 评论(0)

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

简介

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

```html
<link href="css/fluent-reveal-effect.css" rel="stylesheet">          
<script type="text/javascript" src="js/fluent-reveal-effect.js"></script>
```             
#####  HTML
使用一个button原始在页面中创建一个按钮。

```html
<button class="btn">按钮</button>
```
#####  CSS样式
然后为按钮添加下面的CSS样式。

```html
.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;
}
```
#####  初始化插件
最后通过下面的方法来初始化该反光特效的按钮插件。

```html
FluentRevealEffect.applyEffect(".btn", {
  lightColor: "rgba(255,255,255,0.1)",
  gradientSize: 150
})    
```          
如果需要制作点击时的点击波效果，可以使用clickEffect参数。
```html

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>
```
```html
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
  }
})
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果