亚洲一区二区观看播放-疯狂做受xxxx高潮欧美日本-国产极品粉嫩泬免费观看-暖暖www视频免费高清最新期

Web前端知識

首頁 > 免費 > Web前端知識 >

HTML5標簽元素下的下劃線動畫

來源:北京匯仁智杰科技有限公   時間:2016-01-17   點擊: 次

  最近我看到一些博客網(wǎng)站有這么一個效果: 當鼠標放到博客頭部的標題時,這個鏈接的下劃線就會以動畫的方式從無到有,我覺得挺有意思的,好像京東的首頁就有這個效果,大家可以看看。

0.gif

  創(chuàng)建這個效果非常的簡單,不需要加入額外的DOM元素到頁面中,但是低版本的瀏覽器可能不支持CSS動畫(常規(guī)下可能只顯示一條下劃線)

  首先第一件事就是需要將a標簽的text-decoration去掉,設(shè)置position為相對定位.然后確保這a標簽在hover狀態(tài)下顏色一致性.我們這里設(shè)置這個效果只在h2標簽里:

2.jpg

  下一步,我們加入邊框,通過一個動畫來隱藏他.我們通過插入一個偽元素:before來完成,設(shè)置他的縮放為0,跟著,我們設(shè)置 visibility: hidden 來隱藏,因為有些瀏覽器不支持CSS這動畫。

3.jpg

  在底部,我們告訴這元素,在0.3秒內(nèi)完成all動畫來改變他,為了動畫呈現(xiàn),我們現(xiàn)在僅需要使這元素可見在hover狀態(tài)下,且設(shè)置他的X縮放為1:

4.jpg

  這里的代碼中我們都加了一些前綴,其實最新版的瀏覽器很多屬性已經(jīng)可以不用加入前綴,為了確保,我們加入了前綴,來完成我們的代碼。

網(wǎng)絡營銷推廣?。”本﹨R仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網(wǎng)絡推廣經(jīng)驗
  • 有網(wǎng)站建站隊伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗
  • 致力于營銷型網(wǎng)站建設(shè)
  • 始終堅持技術(shù)和服務同樣重要
查看PC版網(wǎng)站
備案號:京ICP備15021091號-1 版權(quán)所有:匯仁智杰