css3小動畫：鼠標hover后text-decoration的動畫

韓冰發布于2019-08-01 18:39 / 3207人閱讀

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

實現效果

具體實現

利用css3 ::after或者::before偽元素實現。
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)
}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51925.html

CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）

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

zqhxuyuan 2019-08-29 13:03 評論0 收藏0
CSS3實現扇形動畫菜單特效

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

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

摘要：過渡允許的屬性值在一定的時間區間內平滑地過渡。需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。需要事件觸發，所以沒法在網頁加載時自動發生。是一次性的，不能重復發生，除非一再觸發。 transition(過渡) transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值...

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

摘要：過渡允許的屬性值在一定的時間區間內平滑地過渡。需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。需要事件觸發，所以沒法在網頁加載時自動發生。是一次性的，不能重復發生，除非一再觸發。 transition(過渡) transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值...

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

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

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