Question

我有一个css按钮动画，其中围绕按钮圈出一条线，我想要的是当你将鼠标悬停在它上面时它将停止终点但继续开始点直到它到达终点。

<a href="#" class="animation purple center-block">About Us</a>
<style>
@keyframes electronic {

0%, 100% {
    background-position: 20px -30px;
}
25% {
    background-position: 150px 5px;
}
50% {
    background-position: 20px 40px;
}
75% {
    background-position: -100px 5px;
}
}
</style>

这是一个小提琴： https://jsfiddle.net/Lypuc0hn/

编辑：对不起，问题有点不清楚，但我会详细说明。

目前这条线围绕着圆圈，但我想要的是当你将鼠标悬停在它上面时，它会继续前进，直到按钮有一个完整的边框。

基本上，该线的1个点将停止，而另一个点继续前进，直到它形成整个边界

Answer 1

您可以使用svg跟踪矩形。

我在你的小提琴上添加了一些代码，但如果你走这条路，你可能会有更多的svg来学习！

https://jsfiddle.net/Lypuc0hn/7/

<svg>
   <rect stroke='purple' stroke-width=1 
     x=5 y=5 width=50 height=50 
     stroke-dasharray="100,0" pathlength='100' />
</svg>

和一些css来动画

@keyframes dasharray {

    0%, 100% {
        stroke-dasharray: 100,0;
    }

    50% {
        stroke-dasharray: 0,100;
    }


}

svg rect {
    animation: dasharray 2s infinite linear;
}

Stroke dasharray是一组表示边框，暗区和空白区域的值。通过具有0个暗区和100个空白区域，这意味着它全部为空白。我们可以为最多100个暗区和0个空白区域设置动画。

路径长度将此数组限制为一个总和。如果你的路径长度为1000，你会看到更多填满的虚线边框（尝试一下，看起来也很整洁！）。

你也可以使用stroke-dashoffset，这样它就可以填满，但也会像它一样移动。

以下是上述更改的示例（不同的路径长度和添加的dashoffset）https://jsfiddle.net/Lypuc0hn/8/

玩得开心！

编辑：这是一个对悬停

作出反应的版本

https://jsfiddle.net/Lypuc0hn/11/

编辑2：这会对悬停做出反应，并且有关于我们的文字

https://jsfiddle.net/Lypuc0hn/12/

Answer 2

试试这个。

@font-face {
    font-family: "open";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
body{
    background-color: black;
    color: white;
    font-weight: 500;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.header{
    margin-top: 15vh;
    margin-bottom: 10vh;
}
img{
    width:auto;
    height: 100%;
}

a {
    display: block;
    margin: 10px;

    text-decoration: none;
    color: inherit;
}
a.pink:hover{
     text-decoration: none;
     color: #ffffff;
     /*background-color: #EA238D;*/


 }
a.green:hover{
    text-decoration: none;
    color: #47ea2f;

}
a.blue:hover{
    text-decoration: none;
    color: #0920a8;

}
a.purple:hover{
    text-decoration: none;
    color: #67008e;

}
.animation {
    width: 200px;
    padding: 20px;
    text-align: center;
    position: relative;
    background: #000000;
    color: #fff;
    font: 13px open, tahoma;
}
.animation svg {
  height: 58px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.animation rect {
  fill: none;
  stroke: #e9b667;
  stroke-dasharray: 110, 130;
  stroke-dashoffset: 3;
  stroke-width: 4;
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.animation:hover rect {
  stroke-dasharray: 422, 0;
  stroke-width: 4;
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="animation purple">
  About Us
  <svg>
    <rect x="0" y="0" fill="none" width="100%" height="100%"/>
  </svg>
</a>

悬停时完成css动画

2 个答案: