正文 

当前位置： 首页 > 知识 >

如何在 CSS 中转换/动画菜单图标？

     2023-03-06     148

关键词：

【中文标题】如何在 CSS 中转换/动画菜单图标？【英文标题】：How to transform/animate a menu icon in CSS? 【发布时间】：2018-05-11 21:00:42 【问题描述】：

我正在制作一个看起来类似于this 的 CSS 动画，而我几乎是 there，但我不知道如何让它正常工作。 对于不能或不想查看链接的每个人： 使用 CSS 我想要一个将三栏菜单图标转换为 X 的动画。我可以使“栏”重叠和旋转，但笔画远非对称。

这是我的代码： HTML：

<div class="container">
 <div class="centerized">    
  <div class="bar1"> </div>
  <div class="bar2"> </div>
  <div class="bar3"> </div>      
 </div> 
</div>

SCSS：

@keyframes ani1
 0% margin-bottom: 16%; 
 50% margin-bottom: none; transform: translate(0, 20px); 
 100% margin-bottom: none; transform: rotate(30deg);


@keyframes ani2
 0% margin-bottom: 16%; opacity: 1; 
 75% margin-bottom: none; opacity: 0; 
 100% margin-bottom: none; opacity: 0; 


@keyframes ani3
 0% margin-bottom: 16%; 
 50% margin-bottom: none; transform: translate(0px, -20px); 
 100% margin-bottom: none; transform: rotate(-30deg);

由于我认为问题在于我在动画期间放置元素的方式，因此我将这部分包括在内。要查看整个代码，我建议单击上面的链接。

【问题讨论】：

【参考方案1】：

我将 CSS 添加到您的 html 以制作该动画。我猜你希望效果像在你的代码笔中一样悬停：

.You-need-this-container 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background: #3FAF82;
  color: #fff;


.container 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);


.centerized 
  width: 80px;
  height: 52px;
  cursor: pointer;
  z-index: 50;


.centerized .bar1,
.centerized .bar2,
.centerized .bar3 
  height: 8px;
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;


.centerized .bar1 
  -webkit-animation: animate-line-1-rev .7s ease-in-out;
  animation: animate-line-1-rev .7s ease-in-out;


.centerized .bar2 
  margin: 14px 0;
  -webkit-animation: animate-line-2-rev .7s ease-in-out;
  animation: animate-line-2-rev .7s ease-in-out;


.centerized .bar3 
  -webkit-animation: animate-line-3-rev .7s ease-in-out;
  animation: animate-line-3-rev .7s ease-in-out;


.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 
  background-color: #fff;


.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 
  background-color: #fff;


.centerized:hover .bar1 
  -webkit-animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
  animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;


.centerized:hover .bar2 
  -webkit-animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
  animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;


.centerized:hover .bar3 
  -webkit-animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
  animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;


.no-animation 
  -webkit-animation: none !important;
  animation: none !important;


@-webkit-keyframes animate-line-1 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  


@keyframes animate-line-1 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  


@-webkit-keyframes animate-line-2 
  0% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  
  100% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  


@keyframes animate-line-2 
  0% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  
  100% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  


@-webkit-keyframes animate-line-3 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  


@keyframes animate-line-3 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  


@-webkit-keyframes animate-line-1-rev 
  0% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  


@keyframes animate-line-1-rev 
  0% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  


@-webkit-keyframes animate-line-2-rev 
  0% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  
  100% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  


@keyframes animate-line-2-rev 
  0% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  
  100% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  


@-webkit-keyframes animate-line-3-rev 
  0% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  


@keyframes animate-line-3-rev 
  0% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  

<div class="You-need-this-container">
  <div class="container">
    <div class="centerized">
      <div class="bar1"> </div>
      <div class="bar2"> </div>
      <div class="bar3"> </div>
    </div>
  </div>
</div>

【讨论】：

如何将动画设置为滑动菜单图标

】如何将动画设置为滑动菜单图标【英文标题】：Howtosetanimationtoslidingmenuicon【发布时间】：2014-08-2703:30:35【问题描述】：我正在使用jfeinstein10的滑动菜单，我可以设置此处给出的导航抽屉图标http://romannurik.github.io/AndroidAssetStudio/... 查看详情

CSS 菜单布局。如何在图标下方放置文字？

】CSS菜单布局。如何在图标下方放置文字？【英文标题】：CSSMenulayout.HowtoplacetextbelowIcon?【发布时间】：2020-05-1317:15:40【问题描述】：我在下面有一个沙箱。我已将侧边栏的宽度设置为固定。我正在尝试使菜单文本位于图标下方... 查看详情

单击菜单按钮时如何添加动画

】单击菜单按钮时如何添加动画【英文标题】：Howtoaddanimationwhenmenubuttonisclicked【发布时间】：2018-07-2911:07:49【问题描述】：动画就像菜单正在缓慢滑下，甚至可能淡入。我更喜欢通过CSS3或jQuery。我尝试在toggleClass中使用持续时... 查看详情

如何在颤动中缩小和放大图标动画？

】如何在颤动中缩小和放大图标动画？【英文标题】：Howtoshrinkandgrowiconanimationinflutter?【发布时间】：2020-08-0320:32:04【问题描述】：我正在使用下面的代码来执行图标的动画增长和缩小动画，但为此，我必须点击图标，我希望动... 查看详情

css3transition实现的简单动画菜单

...动画都变得如此简单。在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。查看dem 查看详情

如何在qt中显示闪烁的[动画]红色/绿色状态图标

】如何在qt中显示闪烁的[动画]红色/绿色状态图标【英文标题】：Howtodisplayblinking[animate]red/greenstatusiconinqt【发布时间】：2016-05-0308:40:52【问题描述】：我想在QtC++应用程序中显示红色动画闪烁图标。设置变量时显示红色闪烁图标... 查看详情

如何在android中删除底部导航视图的图标动画

】如何在android中删除底部导航视图的图标动画【英文标题】：Howtoremoveiconanimationforbottomnavigationviewinandroid【发布时间】：2017-05-2916:53:47【问题描述】：我在我的项目中实现了来自DesignSupportLibrary25的底部导航视图。我在视图中有5... 查看详情

kivymd：如何在下拉菜单中添加图标？

】kivymd：如何在下拉菜单中添加图标？【英文标题】：kivymd:HowtoaddiconinDropdownmenu?【发布时间】：2021-12-0114:30:56【问题描述】：我想在我的下拉菜单中添加一个左图标。它可以通过多种方式实现。但是我需要在下面的脚本中实现... 查看详情

css在管理员菜单中更改自定义帖子类型的图标(代码片段)

查看详情

如何在 Mac OS 中显示菜单栏图标 [重复]

】如何在MacOS中显示菜单栏图标[重复]【英文标题】：HowcanIshowamenubariconinMacOS[duplicate]【发布时间】：2011-05-2612:38:56【问题描述】：可能重复：HowtocreateaMenubarapplicationforMac我想在mac的顶部菜单栏中显示一个图标。在InterfaceBuilder中... 查看详情

如何在AngularJS中动画菜单打开/关闭

】如何在AngularJS中动画菜单打开/关闭【英文标题】：Howtoanimatemenuopen/closeinAngularJS【发布时间】：2013-04-1316:15:22【问题描述】：我正在尝试确定解决此问题的“正确”方法。我有一个带有子菜单的菜单。当我的路线改变时，我想... 查看详情

如何防止父组件中的共享状态破坏子组件中的 CSS 转换

】如何防止父组件中的共享状态破坏子组件中的CSS转换【英文标题】：HowtopreventsharedstateinaparentcomponentfrombreakingCSStransitionsinchildrencomponent【发布时间】：2022-01-1006:33:09【问题描述】：我目前正在使用React和Tailwind构建一个投资组合... 查看详情

如何制作一个图标在一个圆圈中旋转的菜单？

】如何制作一个图标在一个圆圈中旋转的菜单？【英文标题】：Howtomakeamenuwithiconsspinninginacircle?【发布时间】：2013-04-2314:18:11【问题描述】：我正在尝试为我的应用程序创建一个带有几个图标的菜单。用户应该能够旋转这个菜单... 查看详情

如何在回调函数中为 chrome 扩展图标设置动画？

】如何在回调函数中为chrome扩展图标设置动画？【英文标题】：Howtoanimatechromeextensioniconinacallbackfunction?【发布时间】：2011-12-0513:05:51【问题描述】：这是对mypreviousquestion的后续跟进，内容涉及使用XMLHttpRequest()发布到我的书签应... 查看详情

如何在 ANTD 设计菜单中添加自定义图像/图标？

】如何在ANTD设计菜单中添加自定义图像/图标？【英文标题】：Howtoaddacustomimage/iconinANTDDesignmenu?【发布时间】：2018-07-1615:08:24【问题描述】：使用这个例子：https://ant.design/components/layout/#components-layout-demo-side如何添加自定义图像... 查看详情

如何在 Windows 11 中使用 win32 或 uwp 在任务栏中制作动画图标

】如何在Windows11中使用win32或uwp在任务栏中制作动画图标【英文标题】：Howtomaketheiconsanimatedintaskbarusingwin32oruwpinwindows11【发布时间】：2021-10-2822:25:24【问题描述】：我想让我正在开发的应用程序的图标在任务栏上被点击时变成动... 查看详情

如何在 ActionBar 的溢出菜单中显示图标

】如何在ActionBar的溢出菜单中显示图标【英文标题】：HowToshowiconsinOverflowmenuinActionBar【发布时间】：2013-08-2419:32:21【问题描述】：我知道使用本机API是不可能的。是否有解决方法来实现这种视图？【问题讨论】：我想为我的应用... 查看详情

easyui导航菜单如何使用自定义图标

参考技术A自定义图标很简单，你可以打开easyui中的icon.css这个文件看看他的图标类是如何定义的就明白了，自己准备一个16×16的png小图标，然后在icon.css里面增加你自己定义的图标类就可以了。 查看详情