2. 程式人生 > >css3 a標籤用偽類寫下劃線動畫效果

css3 a標籤用偽類寫下劃線動畫效果

阿新 • • 發佈：2019-01-18
  1. before在a標籤之前的橫線動畫
    從左往右動畫效果
    html程式碼：
 <ul>
     <li><a href="">哈哈</a></li>
     <li><a href="">嘿嘿</a></li>
     <li><a href="">啊啊</a></li>
     <li><a href="">下劃線</a></li>
 </ul>

css樣式：

ul>li
 
>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color: #ed6d00;
content: "";
transform: scale3d(0, 1, 1);
transform-origin: left;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform: scale3d(1, 1, 1);
color: #ed6d00;
}

從中間兩邊擴散動畫效果
html程式碼：

 <ul>
     <li><a href="">哈哈</a></li>
     <li><a href="">嘿嘿</a></li>
     <li><a href="">啊啊</a></li>
     <li><a href="">下劃線</a></li>
 </ul>

css樣式：

ul>li>a:before{
position
 
: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color: #ed6d00;
content: "";
transform: scale3d(0, 1, 1);
transform-origin: center;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform: scale3d(1, 1, 1);
color: #ed6d00;
}

從右往左動畫效果
html程式碼：

 <ul>
     <li><a href="">哈哈</a></li>
     <li><a href="">嘿嘿</a></li>
     <li><a href="">啊啊</a></li>
     <li><a href="">下劃線</a></li>
 </ul>

css樣式：

ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color: #ed6d00;
content: "";
transform: scale3d(0, 1, 1);
transform-origin: right;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform: scale3d(1, 1, 1);
color: #ed6d00;
}

需要改變動畫方向引數

transform-origin: right;//center left  right 三種動畫方向

transform: scale3d(0, 1, 1);//第一個引數 表示長度的百分比  第二個引數 高度的百分比

這個動畫效果 一般都是用在導航或者列表

相關推薦

css3 a標籤用偽類寫下劃線動畫效果

before在a標籤之前的橫線動畫 從左往右動畫效果 html程式碼： <ul> <li><a href="">哈哈</a></li> <li><a h

關於a標籤的偽類選擇器使用順序

規則是由於CSS特殊性導致，css特殊性有一個按順序的規則（同一條css規則，後出現會覆蓋前面的同樣規則） 在這裡，比如把hover放在active後面，那麼實際你在啟用（active）連結的時候就觸發了hover偽類，hover在後面覆蓋了active的顏色，所以始終無法看到active的顏色 如果把vis

html裡面a標籤點選時去除下劃線

html程式碼: <a href="#">這裡是A標籤</a> CSS樣式： a:link{text-decoration:none; }  /* 指正常的未被訪問過的連結*/ a:visited{text-decoration:none; }

css3實現下劃線動畫效果

效果 製作gif的時候有卡頓 方法 通過css3的transform和transition屬性來實現 程式碼 下劃線從左到右效果 <!DOCTYPE> <html&

超連結 與眾不同的滑鼠滑過超連結下劃線動畫效果

檢視原文 預設的超連結下劃線動畫十分的生硬，我們可以通過一些簡單的處理，來製作出帶平滑過渡效果的超連結下劃線動畫效果。 眾所周知，超連結<a>元素在預設情況下滑鼠滑過時會出現一條下劃線。預設的超連結下劃線動畫十分的生硬，我們可以通過一些簡

用偽元素寫移動端1px邊框時想實現邊角效果

ack img ive cal left image event 發現 邊框 做移動端頁面時，又想用偽元素做真實1像素邊框，又想有邊角時，會發現只加一個border-radius時出來的效果邊款並沒有變成圓角，解決辦法是加兩個border-radius <div c

css3基礎 :target 目標偽類選擇器 簡單示例

pos url ctype itl w3cschool ont 錨點 網頁 name 禮悟：　　 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。 　　

html 超鏈接標簽 錨點 a標簽偽類

鏈接 跳轉 rom htm href prim 顏色 div head 一個簡易的連接 <a href="01.html">01</a> <body> <a href="01.html" target="_blank">

相容 火狐、IE 的中a標籤用 javascript:void(0); 依然執行跳轉的問題

<a onclick="return false;" href="javascript: void(0)" target="_blank"></a>這麼做相容的原因是：目前三大主流瀏覽器，對三個屬性的處理順序不同。Chrome：onclick -> href ->

用配置類寫springmvc

package com.yy.springmvc.config; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; pu

java 用 Calendar類寫萬年曆

輸入年份和日期打印出本年本月份的日曆，如圖： 本題主要用到了java的 Calender類。 Calendar 類是一個抽象類，它為特定瞬間與一組諸如 YEAR、MONTH、DAY_OF_MONTH、HOUR 等 日曆欄位之間的轉換提供了一些方法，併為操

HTML/CSS: 淺談標籤及偽類選擇器

1.基礎知識 “超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影象，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。” —HTML連結 而對於超文字，簡單的說便是通過一個特定的識別符號，定位到文字所在的地方，然後將其連結到本頁面中。

CSS3選擇器--結構性偽類選擇器

        在學習結構性偽類選擇器之前，先了解2個概念：CSS中的偽類選擇器和偽元素： 1、偽類選擇器：CSS中已經定義好的選擇器,不能隨便取名                  常用的偽類選擇

Android用File類寫一個簡單的檔案管理軟體

一，概要： Android中的File類和JAVA中File類是一樣的，方法也可以去看看java的API(點選檢視）。這裡補充幾點： File file=this.getFilesDir(); //當前應用資料預設的資料儲存路勁:/data/user/0

Java不使用calendar類和其餘的類 只調用Scanner類寫一個日曆

作業題目 java起步，小白一個，只是分享心得和加深印象 ********************************************************************************* 作業要求  構建無參的函式和有參的函式分別輸出每年的

偽類實現下邊框

.JTBabs.active:before { content: ''; position: absolute; left: 20px; bottom: 0px; right: 20px; border-top: 3px sol

css3 a標籤效果

在https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-5看到一些不錯的標籤hover效果，自己試著實現了幾個（本人菜鳥一枚） 預覽 主要使用::after、::before偽元素實現，比較麻煩的

如何使用CSS3中的結構偽類選擇器和偽元素選擇器

結構偽類選擇器介紹 結構偽類選擇器是用來處理一些特殊的效果。 結構偽類選擇器屬性說明表 屬性 描述 E:first-child 匹配E元素的第一個子元素。 E:last-child 匹配E元素的最後一個子元素。 E:nth-child(n) 匹配E元素的第n個子元素。 E:nth

python：類5——Python 的類的下劃線命名有什麽不同？

以及 mod 導入 類成員 部分 span 子類 內部函數 默認 首先是單下劃線開頭，這個被常用於模塊中，在一個模塊中以單下劃線開頭的變量和函數被默認當作內部函數，如果使用 from a_module import * 導入時，這部分變量和函數不會被導入。不過值得註意的

奇妙的CSS3—導航欄下劃線跟隨效果

效果 active 結構 mage 這就是 來看 back -h ace 先來看一下效果： 1、基本效果就是這樣的 ，鼠標懸停，下劃線劃入。鼠標離開，下劃線劃出 2、下劃線的劃入是有方向的，從左側劃入懸停，下劃線由左向右伸長。從右側劃入，下劃線由又往左伸長 實