黄色网站入口国产美女,精品国产欧美另类一区,国产一区二区美女自慰,日日摸夜夜添无码国产

選擇你喜歡的標(biāo)簽
我們會(huì)為你匹配適合你的網(wǎng)址導(dǎo)航

    確認(rèn) 跳過(guò)

    跳過(guò)將刪除所有初始化信息

    懸停代碼小瀑布按鈕

    技術(shù) 2024-08-09 12:53

    聲明：該文章由作者（kiki姐）發(fā)表，轉(zhuǎn)載此文章須經(jīng)作者同意并請(qǐng)附上出處(0XUCN)及本頁(yè)鏈接。。

    適用于科技感的網(wǎng)站中，此按鈕有助于增加網(wǎng)站的科技感效果。

    核心代碼部分，簡(jiǎn)要說(shuō)明了寫(xiě)法思路；完整代碼在最后，可直接復(fù)制到本地運(yùn)行。


    知識(shí)點(diǎn)：?

    1???transition?過(guò)渡屬性?

    2???animation?動(dòng)畫(huà)屬性?

    3???:nth-child(n)?和?:hover?選擇器?

    4???--?自定義屬性（css變量）以及?var(...)?引用自定義屬性值函數(shù)和?calc(...)?計(jì)算屬性值函數(shù)

    思路：基于上一例代碼瀑布加載動(dòng)畫(huà)，實(shí)現(xiàn)鼠標(biāo)懸浮在按鈕上方時(shí)，顯示出其代碼瀑布動(dòng)畫(huà)。

    核心代碼

    html 代碼

    <div?class="btn-box80">??<button?class="btn80">HOVER</button><div?class="loading80"><p?class="p80">4rs<span?class="i80-1">b</span>h<span?class="i80">k</span>r</p><p?class="p80">_7u<span?class="i80">i</span>90<span?class="i80">@</span>v</p><p?class="p80">_7,=<span?class="i80-1">j</span>ud<span?class="i80">i</span>y</p><p?class="p80">d8<span?class="i80-1">%</span>rg</p><p?class="p80"><span?class="i80">d</span>oopd<span?class="i80-1">e</span>g</p><p?class="p80">c4*<span?class="i80-1">h</span>ld</p><p?class="p80">u<span?class="i80">g</span>_^43<span?class="i80">2</span>iu</p></div></div>

    按鈕開(kāi)關(guān)主體代碼結(jié)構(gòu)。

    CSS部分代碼

    .btn-box80{width:124px;height:46px;position:?relative;display:?flex;justify-content:?center;align-items:?center;cursor:?pointer;--color-f:#43ff85;--color-s:#6c72fe;--color-t:#f7e543;}.btn80{width:124px;height:46px;font-size:20px;font-weight:?bold;letter-spacing:4px;outline:?none;background-color:?transparent;border:2px?solid?var(--color-f);color:var(--color-f);position:?absolute;padding:0;cursor:?pointer;z-index:1;transition:?all?0.24s?linear;}.loading80{width:124px;height:46px;font-size:24px;font-weight:?bold;letter-spacing:4px;background-color:?transparent;position:?absolute;left:-2px;overflow:?hidden;cursor:?pointer;z-index:0;opacity:0;transition:?opacity?0.24s?linear;}.p80{cursor:?pointer;writing-mode:?vertical-rl;letter-spacing:3px;font-size:12px;line-height:1;margin:0;padding:0;position:?absolute;color:var(--color-f);--left:3px;--delay:0.1s;animation:?eff80?0.6s?linear?infinite;}.i80{color:var(--color-s);}.i80-1{color:var(--color-t);}.p80:nth-child(1){left:var(--left);}.p80:nth-child(2){left:calc(var(--left)+18px);animation-delay:var(--delay);}.p80:nth-child(3){left:calc(var(--left)+18px*2);animation-delay:calc(var(--delay)*2);}.p80:nth-child(4){left:calc(var(--left)+18px*3);}.p80:nth-child(5){left:calc(var(--left)+18px*4);animation-delay:calc(var(--delay)*4);}.p80:nth-child(6){left:calc(var(--left)+18px*5);animation-delay:calc(var(--delay)*3);}.p80:nth-child(7){left:calc(var(--left)+18px*6);}@keyframes?eff80{0%{transform:translateY(-40%);}100%{transform:translateY(140%);}}.btn-box80:hover.btn80{text-shadow:02px0var(--color-s);box-shadow:2px2px0var(--color-s),-2px-2px0var(--color-t);}.btn-box80:hover.loading80{opacity:1;background-color:#000000;}

    這里在上一例的基礎(chǔ)上，增加了按鈕樣式，利用?:hover?來(lái)顯示隱藏代碼瀑布動(dòng)畫(huà)。

    完整代碼

    html頁(yè)面

    <!DOCTYPE?html><html?lang="zh"><head><meta?charset="utf-8">

    <title>懸停代碼小瀑布按鈕</title>

    <style>

    .app{width:100%;height:100vh;background-color:#ffffff;position:?relative;display:?flex;justify-content:?center;align-items:?center;}.btn-box80{width:124px;height:46px;position:?relative;display:?flex;justify-content:?center;align-items:?center;cursor:?pointer;--color-f:#43ff85;--color-s:#6c72fe;--color-t:#f7e543;}.btn80{width:124px;height:46px;font-size:20px;font-weight:?bold;letter-spacing:4px;outline:?none;background-color:?transparent;border:2px?solid?var(--color-f);color:var(--color-f);position:?absolute;padding:0;cursor:?pointer;z-index:1;transition:?all?0.24s?linear;}.loading80{width:124px;height:46px;font-size:24px;font-weight:?bold;letter-spacing:4px;background-color:?transparent;position:?absolute;left:-2px;overflow:?hidden;cursor:?pointer;z-index:0;opacity:0;transition:?opacity?0.24s?linear;}.p80{cursor:?pointer;writing-mode:?vertical-rl;letter-spacing:3px;font-size:12px;line-height:1;margin:0;padding:0;position:?absolute;color:var(--color-f);--left:3px;--delay:0.1s;animation:?eff80?0.6s?linear?infinite;}.i80{color:var(--color-s);}.i80-1{color:var(--color-t);}.p80:nth-child(1){left:var(--left);}.p80:nth-child(2){left:calc(var(--left)+18px);animation-delay:var(--delay);}.p80:nth-child(3){left:calc(var(--left)+18px*2);animation-delay:calc(var(--delay)*2);}.p80:nth-child(4){left:calc(var(--left)+18px*3);}.p80:nth-child(5){left:calc(var(--left)+18px*4);animation-delay:calc(var(--delay)*4);}.p80:nth-child(6){left:calc(var(--left)+18px*5);animation-delay:calc(var(--delay)*3);}.p80:nth-child(7){left:calc(var(--left)+18px*6);}@keyframes?eff80{0%{transform:translateY(-40%);}100%{transform:translateY(140%);}}.btn-box80:hover.btn80{text-shadow:02px0var(--color-s);box-shadow:2px2px0var(--color-s),-2px-2px0var(--color-t);}.btn-box80:hover.loading80{opacity:1;background-color:#000000;}

    </style>

    </head>

    <body><div?class="app"><div?class="btn-box80"><button?class="btn80">HOVER</button><div?class="loading80"><p?class="p80">4rs<span?class="i80-1">b</span>h<span?class="i80">k</span>r</p><p?class="p80">_7u<span?class="i80">i</span>90<span?class="i80">@</span>v</p><p?class="p80">_7,=<span?class="i80-1">j</span>ud<span?class="i80">i</span>y</p><p?class="p80">d8<span?class="i80-1">%</span>rg</p><p?class="p80"><span?class="i80">d</span>oopd<span?class="i80-1">e</span>g</p><p?class="p80">c4*<span?class="i80-1">h</span>ld</p><p?class="p80">u<span?class="i80">g</span>_^43<span?class="i80">2</span>iu</p></div></div></div></body></html>


    以上就是所有代碼，以及簡(jiǎn)單的思路，希望對(duì)你有一些幫助或者啟發(fā)。

    關(guān)注我們

    [超站]友情鏈接：

    四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
    關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/

    *文章為作者獨(dú)立觀點(diǎn)，不代表 0XUCN 立場(chǎng)
    本文由 kiki姐 發(fā)表，轉(zhuǎn)載此文章須經(jīng)作者同意，并請(qǐng)附上出處(0XUCN)及本頁(yè)鏈接。
    圖庫(kù)