这个按钮是否有更好的版本或更少的延迟？
我试图找到这种确切类型的样式按钮，但我不能。这是一个非常糟糕的尝试，需要进行大量重构，因为我从一开始就没有考虑过正确的样式。
非常感谢任何链接或更有效的代码
我已经看过类似的代码，但是这个线条的确切风格基本上是在我想要的按钮周围绘制和删除的（这只是一个漫无边际的因为＆＃34;要求＆＃34;有更多的描述而不是代码）
.UnderlineButton {
border: none;
background-color: white;
position: relative;
border: 2px solid;
border-top-color: rgb(255,255,255);
border-right-color: rgb(255,255,255);
border-left-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
padding: 10px;
padding-top: 20px;
padding-bottom: 0;
cursor: pointer;
-webkit-animation: UnderlineButton .5s forwards;
}
@-webkit-keyframes UnderlineButton {
0% {
padding-top: 10px;
padding-bottom: 10px;
border-right-color: red;
border-bottom-color: rgb(255,255,255);
border-top-color: red;
border-left-color: red;
}
19% {
border-right-color: red;
}
20% {
border-right-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
border-top-color: red;
border-left-color: red;
}
39% {
border-top-color: red;
}
40% {
border-right-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
border-top-color: rgb(255,255,255);
border-left-color: red;
}
59% {
border-left-color: red;
}
60 {
border-right-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
border-top-color: rgb(255,255,255);
border-left-color: rgb(255,255,255);
}
100% {
padding-top: 20px;
padding-bottom: 0;
border-right-color: rgb(255,255,255);
border-top-color: rgb(255,255,255);
border-left-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
}
}
.UnderlineButton:hover {
-webkit-animation: UnderlineButtonHover .5s forwards;
}
@-webkit-keyframes UnderlineButtonHover {
0% {
padding-top: 20px;
padding-bottom: 0;
border-right-color: rgb(255,255,255);
border-top-color: rgb(255,255,255);
border-left-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
}
20% {
padding-top: 20px;
padding-bottom: 0;
border-right-color: rgb(255,255,255);
border-top-color: rgb(255,255,255);
border-left-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
}
39% {
border-right-color: rgb(255,255,255);
}
40% {
border-right-color: red;
border-left-color: rgb(255,255,255);
border-top-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
}
59% {
border-top-color: rgb(255,255,255);
}
60% {
border-right-color: red;
border-top-color: red;
border-left-color: rgb(255,255,255);
border-bottom-color: rgb(255,255,255);
}
79% {
border-left-color: rgb(255,255,255);
}
80% {
border-right-color: red;
border-top-color: red;
border-left-color: red;
border-bottom-color: rgb(255,255,255);
}
99% {
border-bottom-color: red;
}
100% {
padding-top: 10px;
padding-bottom: 10px;
border-right-color: red;
border-bottom-color: red;
border-top-color: red;
border-left-color: red;
}
}
.UnderlineButton:before {
position: absolute;
bottom: -2px;
background-color: red;
width: 80%;
height: 2px;
content: "";
right: 10%;
-webkit-animation: UnderlineButtonBefore .5s forwards;
}
@-webkit-keyframes UnderlineButtonBefore {
0% {
top: 100%;
width: 100%;
left: 0;
right: 0;
height: 2px;
}
20% {
left: 100%;
right: 0;
height: 2px;
width: 2px;
top: 100%;
}
21% {
top: 0;
width: 2px;
height: 100%;
right: 0;
left: 100%;
}
40% {
top: 0;
width: 2px;
height: 2px;
right: 0;
left: 100%;
}
41% {
top: -2px;
width: 100%;
height: 2px;
right: 0;
left: 0;
}
60% {
top: -2px;
width: 2px;
height: 2px;
left: 0;
}
61% {
top: 0;
width: 2px;
height: 100%;
left: -2px;
bottom: 0;
}
80% {
top: 100%;
bottom: 0;
width: 2px;
height: 0;
left: -2px;
bottom: 0;
}
90% {
bottom: -2px;
left: 0;
width: 0;
height: 2px;
}
100% {
right: 10%;
left: 10%;
width: 80%;
bottom: -2px;
height: 2px;
}
}
.UnderlineButton:hover:before {
-webkit-animation: UnderlineButtonBeforeHover .5s forwards;
}
@-webkit-keyframes UnderlineButtonBeforeHover {
0% {
right: 10%;
width: 80%;
left: 10%;
}
20% {
right: 0;
width: 2px;
height: 2px;
bottom: -2px;
left: 100%;
}
21% {
right: 0;
width: 2px;
height: 2px;
top: 100%;
}
40% {
width: 2px;
height: 100%;
top: 0;
right: -2px;
}
41% {
top: -2px;
height: 2px;
width: 2px;
left: 100%;
}
60% {
width: 100%;
height: 2px;
left: 0;
top: -2px;
}
61% {
width: 2px;
height: 2px;
top: -2px;
left: -2px;
}
80% {
height: 100%;
width: 2px;
top: -2px;
left: -2px;
}
81% {
height: 2px;
width: 2px;
bottom: -2px;
left: -2px;
top: 100%;
}
100% {
top: 100%;
width: 100%;
left: 0;
height: 2px;
}
}<div style="padding: 40px; background-color:rgb(252,252,252);">
<button class="UnderlineButton">Underline</button>
</div>
答案 0 :(得分：0)
我认为你正在寻找这种东西。我过去也有类似的要求。请给我一些时间来修改它的要求。同时请随意看看你是否可以自己动手。我相信你正在寻找转型？
button {
background: none;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
-webkit-box-shadow: inset 0 0 0 2px #f45e61;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
}
button::before, button::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
.draw {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
.draw::before, .draw::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw::before {
top: 0;
left: 0;
}
.draw::after {
bottom: 0;
right: 0;
}
.draw:hover {
color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
width: 100%;
height: 100%;
}
.draw:hover::before {
border-top-color: #60daaa;
border-right-color: #60daaa;
-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
border-bottom-color: #60daaa;
border-left-color: #60daaa;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}<html>
<head>
</head>
<body>
<div id="wrapper">
<section class="buttons">
<button class="draw">Draw</button>
<section>
</div>
</body>
</html>