您的位置：首页 > Web前端 > CSS

css3伪类选择器--动态伪类选择器

2017-06-02 11:13 453 查看

动态伪类并不存在于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;*/
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航