我正在尝试重写一个汉堡按钮(这是示例动画*:
https://codepen.io/iurii-gavryliuk/pen/dyNwyvL) 不使用任何框架(上面的示例使用“指南针样式”)。
到目前为止,我实现了动画,但是圆形动画很粗:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: arial;
}
body {
padding: 0;
margin: 0;
text-align: center;
font-family: arial;
}
section {
height: 300px;
padding-top: 100px;
float: left;
width: 50%;
position: relative;
}
/*==============++++================*/
.menu {
height: 100px;
width: 100px;
position: relative;
margin: auto;
padding-top: 20px;
border: 5px solid transparent;
border-radius: 100%;
transition: all 0.3s;
cursor: pointer;
}
.bar {
height: 5px;
width: 70px;
display: block;
margin: 10px auto;
position: relative;
background-color: #fff;
border-radius: 10px;
transition: all 0.4s;
}
.model-6 {
background-color: #EEBA1A;
}
.model-6 .menu {
overflow: hidden;
}
.model-6 .menu:after {
content: "";
width: 90%;
height: 90%;
left: 0;
top: 0;
position: absolute;
border: 5px solid transparent;
border-radius: 100%;
}
.model-6 .menu:hover:after {
animation-name: circle-creation;
animation-duration: 1s;
animation-direction: forwards;
animation-timing-function: ease-in-out;
}
.model-6 .menu:hover .bar:nth-of-type(1) {
transform: translateY(15px) rotate(45deg);
}
.model-6 .menu:hover .bar:nth-of-type(2) {
transform: translateX(100px);
transition: all 0.6s;
}
.model-6 .menu:hover .bar:nth-of-type(3) {
transform: translateY(-15px) rotate(-45deg);
}
@keyframes circle-creation {
0% {
border-color: transparent;
transform: translate(0deg);
}
25% {
border-color: transparent #fff transparent transparent;
transform: translate(-35deg);
}
50% {
border-color: transparent #fff #fff transparent;
}
75% {
border-color: transparent #fff #fff #fff;
}
100% {
border-color: #fff;
transform: translate(-300deg);
}
}
<section class="mod model-6">
<div class="menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"> </div>
</div>
</section>
如何实现与原始动画相同(或相似)的圆形动画?
谢谢!