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

HTML5 svg和CSS3炫酷鼠标点击按钮特效

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

简介

##### HTML结构
该鼠标点击按钮特效中每一个可点击的元素都是一个button按钮。

```html
<button class="cbutton cbutton--effect-boris">
    <i class="cbutton__icon fa fa-fw fa-play"></i>
    <span class="cbutton__text">Play</span>
</button>
```
#####  CSS样式
以下是该css3点击按钮特效的通用CSS样式：

```html
.cbutton {
    position: relative;
    display: inline-block;
    margin: 1em;
    padding: 0;
    border: none;
    background: none;
    color: #286aab;
    font-size: 1.4em;
    transition: color 0.7s;
}
 
.cbutton.cbutton--click,
.cbutton:focus {
    outline: none;
    color: #3c8ddc;
}
 
.cbutton__icon {
    display: block;
}
 
.cbutton__text {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
 
.cbutton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
```
插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

```html
/* Effect Boris */
 
.cbutton--effect-boris::after {
    background: rgba(111,148,182,0.1);
}
 
.cbutton--effect-boris.cbutton--click::after {
    animation: anim-effect-boris 0.3s forwards;
}
 
@keyframes anim-effect-boris {
    0% {
        transform: scale3d(0.3, 0.3, 1);
    }
    25%, 50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1);
    }
}
```

web299.com

HTML5 svg和CSS3炫酷鼠标点击按钮特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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