简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie wird dieser Strichanimationseffekt erreicht?
学习ing
学习ing 2017-06-24 09:44:08
0
3
833

Dieser strichartige Effekt erscheint, wenn die Maus darüber fährt. Kann er mit reinem CSS erreicht werden? Wie erreicht man den gleichen Effekt?

学习ing
学习ing

Antworte allen(3)
学霸
学霸2017-06-24 09:46:08 3 Etage

开始我想尝试用伪类来实现，但z-index好像没办法处理，所以就这样模拟了。
demo

<style type="text/css">
.btn{
    position: relative;
    height: 45px;
    width: 200px;
    background: #fff;
    color: #6cf;
    text-align: center;
    line-height: 45px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.b-l{
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    left: -1px;
    top: -2px;
    background: #6cf;
    z-index: -1;
    -webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s;
    transition:width 1s linear 2s,height 0.5s linear 1.5s;
}

.b-r{
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    right: -1px;
    bottom: -2px;
    background: #6cf;
    z-index: -1;
    -webkit-transition:width 1s linear 0.5s,height 0.5s linear;
    transition:width 1s linear 0.5s,height 0.5s linear;
}

.btn:hover .b-l{
    -webkit-transition:width 1s linear,height 0.5s linear 1s;
    transition:width 1s linear,height 0.5s linear 1s;
    width: 201px;
    height: 46px;
}

.btn:hover .b-r{
    -webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
    transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
    width: 201px;
    height: 46px;
}
</style>
<body>
<p class="btn">
    <p class="b-l"></p>
    <p class="b-r"></p>
    btn
</p>
</body>
Wie +0
Antwort hinzufügen
代言
代言2017-06-24 09:46:08 2 Etage

可以实现 主要依靠animation-delay属性，可以自行搜索下

Wie +0
Antwort hinzufügen
習慣沉默
習慣沉默2017-06-24 09:46:08 1 Etage

是SVG吧。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！