css3偽類選擇器--動態偽類選擇器
阿新 • • 發佈：2019-01-24
動態偽類並不存在於html中，只有當用戶和網站互動的時候才會體現出來。動態偽類包含兩種，一種是在連結中常看到的錨點偽類，一種是使用者行為偽類。
連結偽類選擇器：E:link（未被訪問過） 和 E:visited（已被訪問過），
使用者行為偽類選擇器：E:active（點選時）、E：hover（滑鼠滑過時）、E：focus（元素獲得焦點時）
例子：美化按鈕
頁面展示效果如下：
點選前：
滑鼠滑過：
點選時：
html程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>動態偽類選擇器----美化按鈕</title>
<link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="download-info">
<a href="#" class="btn">要點選的按鈕</a>
</div>
</body>
</html> CSS程式碼如下：
.download-info{
text-align: center;
margin-top: 50px;
}
/*預設狀態下的按鈕效果*/
.btn{
font-size: 20px;
/*background-color: #0074cc;*/
/*css3，背景線性漸變*/
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(#0055cc));
background-repeat: repeat-x;
display: inline-block;
border: 1px solid #cccccc;
/*css3，色彩模組*/
border-radius: 6px;
cursor: pointer;
font-weight: normal;
/*濾鏡*/
/*filter: ;*/
padding: 14px 24px;
text-align: center;
text-decoration: none;
color: #ffffff;
}
/*懸浮狀態下按鈕效果*/
.btn:hover{
background-position: 0 -15px;
background-color: #0055cc;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
/*動畫效果*/
/*transition: background-position 0.1s linear;*/
/*-webkit-transition: background-position 0.1s linear;*/
}
/*點選時按鈕效果*/
.btn:active{
background-color: red;
background-image: none;
}
/*獲得焦點時按鈕效果*/
.btn:focus{
outline: thin dotted #333;
outline-offset: -20px;
outline: 5px auto -webkit-focus-ring-color;
/*background-color: darkgoldenrod;*/
}