css3小動畫：鼠標(biāo)hover后text-decoration的動畫

韓冰發(fā)布于2019-08-01 18:39 / 3222人閱讀

摘要：實(shí)現(xiàn)效果具體實(shí)現(xiàn)利用或者偽元素實(shí)現(xiàn)。代碼無法通過地址訪問解決方案代碼

實(shí)現(xiàn)效果

具體實(shí)現(xiàn)

利用css3 ::after或者::before偽元素實(shí)現(xiàn)。
html代碼


      webpack無法通過 IP 地址訪問 localhost 解決方案

css代碼

.abstract-title {
    line-height: 2.5rem;
    color: #787878;
    padding-bottom: 0.5rem;
    position: relative;
}

.abstract-title span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #aaa;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.abstract-title span:hover::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1)
}

云服務(wù)器 GPU云服務(wù)器 css3動畫高性能css3動畫小動畫 html的動畫特效

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51925.html

相關(guān)文章

CSS3熱身實(shí)戰(zhàn)--過渡與動畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動）

摘要：規(guī)定動畫的時(shí)長。注意子菜單要用隱藏，在顯示的時(shí)候再設(shè)置。如果不加，實(shí)際上子菜單，以及子菜單下面的一直在頁面上，如果鼠標(biāo)移上去子菜單，以及子菜單下面的。 1.前言在自己的專欄上寫了十幾篇文章了，都是與js有關(guān)的。暫時(shí)還沒有寫過關(guān)于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來實(shí)現(xiàn)三個(gè)特效，希望這三個(gè)特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 評論0 收藏0
CSS3實(shí)現(xiàn)扇形動畫菜單特效

摘要：實(shí)現(xiàn)扇形動畫菜單特效效果圖代碼如下，復(fù)制即可使用實(shí)現(xiàn)扇形動畫菜單特效?CSS3實(shí)現(xiàn)扇形動畫菜單特效 ? 效果圖： ? ? ?代碼如下，復(fù)制即可使用： DOCTYPE html> CSS3實(shí)現(xiàn)扇形動畫菜單特效 *{padding: 0; margin: 0;} body{backg...

terasum 2019-04-23 13:34 評論0 收藏0
面試官: css3動畫了解嗎? 我: .......

摘要：過渡允許的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)。需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動發(fā)生。是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。 transition(過渡) transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
面試官: css3動畫了解嗎? 我: .......

摘要：過渡允許的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)。需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動發(fā)生。是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。 transition(過渡) transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值...

weakish 2019-05-23 11:49 評論0 收藏0
CSS3動畫效果transition

摘要：鼠標(biāo)移動觸發(fā)的動畫效果。第二個(gè)參數(shù)就是動畫耗時(shí)，默認(rèn)是，所以必不可少，要不然沒有動畫效果，沒什么可說的。多個(gè)樣式各個(gè)樣式用逗號隔開即可寬度完成變化，高度延遲執(zhí)行，完成變化，背景色完成變化效果如下未完待續(xù)1.transition的瀏覽器支持情況 IE10+支持，IE6789都不支持！目前，其他瀏覽器最新版本都支持，不需要再加前綴-webkit- 之類的了 2. 還是一步一步說說怎么用trans...

番茄西紅柿 2019-04-23 11:57 評論0 收藏0