Question

我一直在尝试对该图标进行动画处理，但不确定执行此操作的实际方法是什么。

基本上，它会旋转3线以创建一个箭头，当您单击它时，菜单会从箭头方向展开-> The Icon

我设法对其进行了编码，但其中之一行并不像我想要的那样，我尝试使用transform-origin，但是没有用

namespace WindowsFormsApplication1
{
public partial class myprogram : Form
{
    public myprogram()
    {            
        InitializeComponent();
    }

    WebKitBrowser wb1 = new WebKitBrowser();



     private void timer1_Tick(object sender, EventArgs e)
    {
        timer1.Enabled = false;
        wb1.Navigate("site.com");
        timer2.Enabled = true;
    }

    private void timer2_Tick(object sender, EventArgs e)
    {
        timer2.Enabled = false;
        wb1=null;    
        timer1.Enabled = true;
    }      
}
}

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  align-content: center;
  width: 100vh;
  height: 100vh;
}

.menu-wrapper {
  width: 30px;
  height: 30px;
  background-color: green;
  position: relative;
}

.line {
  width: 30px;
  height: 5px;
  background-color: red;
  transform-box: view-box;
}

.top {
  position: absolute;
  top: 0;
}

.middle {
  position: absolute;
  top: 12.5px;
}

.bottom {
  position: absolute;
  bottom: 0;
}

.menu-wrapper:hover .top {
  transform: translateY(12.5px);
  transform: rotate(-90deg);
  transform-origin: inherit;
}

.menu-wrapper:hover .middle {
  transform: rotate(-45deg);
}

Answer 1

在使用position:relative时始终记得使用position:absolute;

你在这里。

*{transition:all .3s ease-out, all .3s ease-in;}

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  align-content: center;
  width: 100vh;
  height: 100vh;
}

.menu-wrapper {
  width: 30px;
  height: 30px;
  /*background-color: green;*/
  position: relative;
}

.line {
  width: 30px;
  height: 5px;
  position: relative;
  background-color: red;
  transform-box: view-box;
}

.top {
  position: absolute;
  top: 0;
}

.middle {
  position: absolute;
  top: 12.5px;
}

.bottom {
  position: absolute;
  bottom: 0;
}

.menu-wrapper:hover .top {
  transform: translateY(0);
  transform: rotate(-90deg);
  transform-origin: inherit;
  left: -12.5px;
  top: 12px;
}

.menu-wrapper:hover .middle {
  transform: rotate(-45deg);
  left: 0;
}

<body>

  <div class="menu-wrapper">
  <div class="line top"></div>
  <div class="line middle"></div>
  <div class="line bottom"></div>
</div>

还可以使用一个Codepen：https://codepen.io/Ev1tw1n/pen/wQNWeq

CSS中的动画菜单图标

1 个答案: