hamburgers指南攻略_超酷图标变形动画特效

hamburgers指南攻略

官方网址:https://jonsuh.com/hamburgers

hamburgers指南攻略_超酷图标变形动画特效

GitHub:https://github.com/jonsuh/hamburgers

简介描述:超酷图标变形动画特效

Hamburgers是一款效果超酷的图标变形动画特效CSS3动画库。包括18种不同的变形动画效果,你还可以通过Sass文件来自定义你自己的图标变形动画。

安装

你可以通过bower或npm来安装Hamburgers变形动画。

bower install css-hamburgers
npm install hamburgers

需要在页面中引入hamburgers.css文件使用方法

<link href="dist/hamburgers.css" rel="stylesheet"></link>

HTML结构如下:

<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

你也可以使用<div>来代替按钮元素。

<div class="hamburger" type="button">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

然后你可以添加相应的class类来获取相应的图标变形动画。

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

海计划公众号
(0)
上一篇 2020/03/06 09:11
下一篇 2020/03/06 09:11

您可能感兴趣的内容

  • Vue 中的 Props 与 Data 细微差别,你知道吗?小白常识_区别小白知识

    Vue提供了两种不同的存储变量:props和data。这些方法一开始可能会让人感到困惑,因为它们做的事情很相似,而且也不清楚什何时使用props,何时使用data。那么props和data有什么区别呢?data是每个组件的私有内存,可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。在本文中,我们将学习到:什么是props,为什么这些

    2020/03/20
  • javascript中字符串如何转换成数组?菜鸟知识_字符教程视频

    javascript中字符串如何转换成数组?下面本篇文章就来给大家介绍一下使用javascript将字符串转换成数组的方法,在javascript中,可以使用split()方法来将字符串转换成数组。split()方法用于把一个字符串分割成字符串数组,该方法不改变原始字符串。语法:stringObject.split(separator,limit)参数:● 

    2020/03/20
  • 用css设置a标签无效,让链接跳转失效使用帮助_标签使用指南

    这个代码有个坑,就是如果a标签里面放了一个图片,然后给a标签设置这个样式,这个时候是不起效果的,只能在a标签外面包一个div,然后给div设置这个样式pointer-events:none;这个是 css3 的代码,这句代码可以把 onlick 事件去掉,相当于变为普通文本

    2020/03/26
  • Css边框阴影:box-shadow属性入门指南_属性使用教程

    天在写一个点亮灯泡的小项目的时候,用到了box-shadow属性。感觉这个属性挺有意思的,索性专门整理一下。一. box-shadow的定义和语法定义:box-shadow是css3新增的一个属性。在W3School里,定义box-shadow是向框添加一个或者多个阴影的属性。 语法:box-shadow: h-shadow v-shadow blur sp

    2020/03/26
  • wordpress大前端DUX主题小白攻略_主题菜鸟教程

    DUX主题是基于WordPress程序的主题,由themebetter团队原创开发,是目前比较火的wordpress主题​DUX主题简介支持百度熊掌号,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、自动缩略图DUX主题基于WordPress程序,响应式布局支持电脑、平板和手机的完美展示布局:响应式布局,不同设备不同

    2020/03/30
  • One Page Love入门基础教程_单页面网站设计欣赏,模版下载、交易

    One Page Love基础知识 官方网址:https://onepagelove.com/ 简介描述:单页面网站设计欣赏,模版下载、交易 One Page Love is a …

    2020/03/06
  • 程序员的微创业入门基础_程序员菜鸟教程下载

    不知道有没有觉得程序员是吃青春饭的;有没有发现很多公司的招聘需求上写着35岁以下不要;有没有发现一转眼都已奔三,却依旧一事无成,无房无车;怎么办?我想过创业,我也创业过,15年的时候和同学一块做人脸识别,种种原因最后没成功,此前两年的积蓄也清零,创业?人家都说是九死一生,我说就是,在你没有足够人脉钱脉的时候你去创业,无异于以卵击石。程序员是吃请青春饭的,因为

    2020/03/31
  • pm2的使用与总结,一款node.js服务器管工具菜鸟教程网_pm2基础入门

    Node服务常使用的工具是pm2和forever,通过它可以是node的服务在后台运行。如果站点访问量不大,不需要监控,可以通过forever来管理多个站点。这边文章将介绍pm2的主要用法。通过pm2对node进程的管理,可以简化很多繁琐的任务,例如性能监控、自动重启、负载均衡等,同时node的使用也非常简单。pm2全局安装npm install pm2 –

    2020/04/06
  • sly.js入门百科_jQuery滚动插件

    sly.js入门百科 官方网址:http://darsa.in/sly GitHub:https://github.com/darsain/sly 简介描述:jQuery滚动插件 …

    2020/03/06
  • 移动 H5 首屏加速、优化方案新手入门_优化菜鸟教程网

    随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好处(跨平台,动态更新,减体积,无限扩展),APP 客户端里出现越来越多内嵌 web 页面(为了配上当前流行的说法,以下把所有网页都称为 H5 页面,虽然可能跟 H5 没关系),很多 APP 把一些功能模块改成用 H5 实现。虽然说 H5 页面性能变好了,但如果没

    2020/03/30
  • Bideo.js实现全屏视频背景菜鸟教程下载_视频基础知识入门

    想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。特性自动调整:Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸,当浏览器窗口调整时,它会自适应窗口尺寸,移动端、PC端都能自动调整,使视频作为背景并全屏展示。覆盖:视频作为网页背景后

    2020/03/29
  • 从浏览器渲染过程看重绘回流基础教程_渲染基础知识

    渲染过程浏览器渲染过程如下:解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树。将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree)。Layout(回流): 根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)。Painting(重绘): 根据渲染树以及回流得到的几何信息,得到节点的绝对像素。D

    2020/03/20
  • 如何通过自定义域名方式访问本地WEB应用使用指南_域名入门基础教程

    自定义域名访问本地WEB应用。本地安装了WEB服务端,怎样通过自定义域名方式实现从公网访问本地WEB应用?本文将介绍具体的实现步骤。1. 准备工作1.1 安装并启动WEB服务端默认安装的WEB端口是80。1.2 申请域名并完成域名备案可以在万网、百度云、腾讯云、西部数码等等域名服务商注册并购买域名。在域名服务商注册并购买的域名必须要完成域名备案,否则无法使用

    2020/04/03
  • ikonate使用说明_完全可定制的矢量图标

    ikonate使用说明 官方网址:https://ikonate.com GitHub:https://github.com/mikolajdobrucki/ikonate 简介描…

    2020/03/06
  • 纯CSS3实现各种表情动画小白指南_动画基础知识入门

    CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画,一共有7组表情动画。效果如下: 代码如下:

    body {text-align: cen

    2020/04/03
  • LESS 原理,一款css的预处理程序Less的使用指南教程_less入门基础

    ​Less一种动态样式语言,LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数…LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。安装与使用://客户端引用
    <link rel="stylesheet/less" type="text/css" href=

    2020/04/06