6个CSS hamburger动画_html/css_WEB-ITnose
我用了CSS和一点JavaScript来演示如何生成”汉堡包”动画。
在前面的文章中,我把我对导航栏菜单(也被成为”汉堡包图标”)的动画灵感发布出来。结果收到了不少粉丝的称赞,我先谢谢你们了。
我决定在这方面下多点功夫,于是我写了一系列不同的动画实现方式。在这片文章中,你将会看到6个不同”汉堡包”动画的增强版。
我使用了一点JavaScript来触发动画,在继续研究下去之前,你可以先看看Demo (译者:如果打不开,请点击文章最下面的Demo)
变化
我之前写的代码不算太整洁,改变主要目的是让代码更加整洁有序。
首先,我用button元素替换掉了无语意的div。这样代码更具有易读性。
然后我把wrapper的类名命名为.hamburger,在.hamburger里面,我有另外一个元素(一个span标签),我把它的类名定位.icon
精华
我们的.icon元素是被包裹起来构成一个完整的图标。
为了让我们的动画更加平滑,中间的栏需要足够的灵活,因此,.icon元素就用来充当汉堡包的肉饼部分。
至于图标包裹部分,.hamburger不仅仅是充当wrapper的角色,它也用协助完成整个动画。所以汉堡包的上下两块面包的部分就由.hamburger的伪类来填充。
HTML
<button class="hamburger hamburger-cancel"> <span class="icon"></span></button>
正如你所看到的,button元素担任.hamburger角色。另外一个类名(.hamburger-cancel)是用来区分究竟是什么汉堡(板烧鸡腿还是巨无霸什么的)。我们这里有6中不同口味的汉堡。
JavaScript
正如一开始我说的,我们使用一小段JS代码来做切换,下面是我的代码片段
var el = document.querySelectorAll('.hamburger');for(i=0; i<=el.length; i++) { el[i].addEventListener('click', function() { this.classList.toggle('active'); }, false);}
上面的JavaScript主要是通过绑定点击时间,把.active类添加到对应元素上。
代码
下面的CSS代码设置了我们hamburger元素的默认状态。你可以适当调整font-size,当然font-size最大值不能超出我们的图标
除了结构规范,我们也用了CSS transition 属性来让动画更加平滑。
.hamburger { font-size: 60px; display: inline-block; width: 1em; height: 1em; padding: 0; cursor: pointer; transition: transform .2s ease-in-out; vertical-align: middle; border: 0 none; background: transparent; }/** * Button height fix for Firefox */.hamburger::-moz-focus-inner { padding: 0; border: 0 none; }/** * Focus fix for Chrome */.hamburger:focus { outline: 0; }
现在,是时候绘制我们的汉堡图标了。下面的定义可以让我们更清晰地了解整个过程。
很明显,所有图标的三条杠都有一些共同特性,我们可以把抽出来。
.hamburger:before,.hamburger:after { content: ""; }.hamburger:before,.hamburger .icon,.hamburger:after { display: block; width: 100%; height: .2em; margin: 0 0 .2em; transition: transform .2s ease-in-out; border-radius: .05em; background: #596c7d; }/** * Styles for the active `.hamburger` icon */.hamburger.active:before,.hamburger.active .icon,.hamburger.active:after { background: #2c3e50; }
上面的代码,我们画了三条杠在.hamburger里面,给点间隙我们就能清晰地看到汉堡图标了。
为了看上去更圆滑,我们设置了boder-radius属性。由于我们的元素都是没有文字的,我们再设置一个背景颜色。
不出意外,我们已经画出一个山东煎饼。让我们继续接下来的动画部分。
动画
6种不同口味的汉堡,我们一一来解析。
垂直
用最简单的方法,要让汉堡旋转,我们只需要在.active状态的时候把它旋转90度,或者270度也行,看起来更酷炫一点。
/** * VERTICAL HAMBURGER */.hamburger.hamburger-vertical.active { transform: rotate(270deg); }
X/取消
这个图标的做法就仁者见仁智者见者了,做法有很多,我第一个灵感是当中间的肉饼消失的时候,另外两个面包旋转一下,就出来一个’X‘形状了。
当然了,为了只是旋转是不够的。旋转的同时还要在Y轴上做变化,否则距离有点远。
/** * CLOSE/CANCEL/CROSS */.hamburger.hamburger-cancel.active .icon { transform: scale(0); }.hamburger.hamburger-cancel.active:before { transform: translateY(.4em) rotate(135deg); }.hamburger.hamburger-cancel.active:after { transform: translateY(-.4em) rotate(-135deg); }
加号
这个动画是这样的:
- 中间的肉饼消失
- 上层面包移动并旋转来充当垂直的那一杠
- 底部的面包移动并旋转来充当水平线
这3个动作就可以完成hamburger到plus的动画了
/** * PLUS */.hamburger.hamburger-plus.active .icon { transform: scale(0); }.hamburger.hamburger-plus.active:before { transform: translateY(.4em) rotate(90deg); }.hamburger.hamburger-plus.active:after { transform: translateY(-.4em) rotate(180deg); }
减号
减号的变化是这样的,中间层还是消失不见,其他两块向上向下移动,最终合成一块。然后同样地让他们旋转个180度,这样就很酷炫了~
/** * MINUS/DASH */.hamburger.hamburger-minus.active { transform: rotate(180deg); }.hamburger.hamburger-minus.active .icon { transform: scale(0); }.hamburger.hamburger-minus.active:before { transform: translateY(.4em); }.hamburger.hamburger-minus.active:after { transform: translateY(-.4em); }
左箭头
这个包括了移动,旋转和调整上下两块面包。最后加上一个旋转180度
/** * LEFT ARROW */.hamburger.hamburger-arrow-left.active { transform: rotate(180deg); }.hamburger.hamburger-arrow-left.active:before { width: .6em; transform: translateX(.4em) translateY(.2em) rotate(45deg); }.hamburger.hamburger-arrow-left.active .icon { border-radius: .1em .25em .25em .1em; }.hamburger.hamburger-arrow-left.active:after { width: .6em; transform: translateX(.4em) translateY(-.2em) rotate(-45deg); }
右箭头
这个就是左箭头的镜面复制了。可以复制左箭头的代码,再做适当变更。
/** * RIGHT ARROW */.hamburger.hamburger-arrow-right.active { transform: rotate(180deg); }.hamburger.hamburger-arrow-right.active:before { width: .6em; transform: translateX(0) translateY(.2em) rotate(-45deg); }.hamburger.hamburger-arrow-right.active .icon { border-radius: .25em .1em .1em .25em; }.hamburger.hamburger-arrow-right.active:after { width: .6em; transform: translateX(0) translateY(-.2em) rotate(45deg); }
总结
我在网上找了相似的实现,我发现Sara’s Navicon transformicons很酷,健壮并且更有感染力。
我希望你能喜欢这篇文章,可以在下面分享您的想法和建议。感谢阅读。
http://helkyle.com/demos/hamburger-icons.html’ target=’__blank’>点击查看Demo
本文根据@Rahul Arora所译,整篇译文带有我自己的理解和意思,如果有译得不好的地方或者不对之处,还请大家指点。如需转载此译文,须注明英文出处:http://w3bits.com/animated-hamburger-icons/

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
