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

12种炫酷汉堡包图标按钮变形动画特效

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

12种炫酷汉堡包图标按钮变形动画特效

简介

这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效。这组特效共12种动画效果，分别是在用户点击汉堡包按钮之后，汉堡包按钮以不同的方式执行变形动画。

####  使用方法
#####  HTML结构
这组汉堡包按钮的HTML结构基本相似，都是使用一个div元素来包裹3个span元素。span元素用于制作汉堡包按钮的三条线。

```html
<div class="hamburger" id="hamburger-1">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>
```
#####  CSS样式
在style.css文件中，分别为这12中效果制定了变形动画的CSS3代码，例如第一种变形动画的CSS代码如下：

```html
#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}
 
#hamburger-1.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
 
#hamburger-1.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}       
```           
#####  JavaScript
在用户点击汉堡包按钮时，使用jquery代码为该汉堡包按钮切换is-active class类。

```html
$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
  });
}); 
```

web299.com

12种炫酷汉堡包图标按钮变形动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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