简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Bagaimanakah kesan animasi strok ini dicapai?
学习ing
学习ing 2017-06-24 09:44:08
0
3
871

Kesan seperti strok ini akan muncul apabila tetikus melayang di atasnya. Bolehkah ia dicapai dengan CSS tulen? Bagaimana untuk mencapai kesan yang sama?

学习ing
学习ing

membalas semua(3)
学霸
学霸2017-06-24 09:46:08 Tingkat 3

Pada mulanya saya ingin mencuba menggunakan kelas pseudo untuk melaksanakannya, tetapi z-index nampaknya tidak dapat mengendalikannya, jadi saya mensimulasikannya seperti ini.
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>
Suka +0
Tambah Balasan
代言
代言2017-06-24 09:46:08 Tingkat 2

Ia boleh direalisasikan terutamanya bergantung pada atribut kelewatan animasi, anda boleh mencarinya sendiri

Suka +0
Tambah Balasan
習慣沉默
習慣沉默2017-06-24 09:46:08 Tingkat 1

Ia SVG.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！