Active的一段话
active的英文解释为“积极的”,表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的,然而打开链接是一个一瞬间的动作,这不能很好的体现active选择器的特点。
Active的特点
其实我们打开一个带有active链接,激活acive是有一个过程的,就是点击模块后直到松开模块。如果我们不指定这个过程所花费的时间,笔者认为其默认花费零点几秒。
DOCTYPE html>
<html>
<head>
<title>atitle>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a{
display:block;
width:30px;
margin:20px;
border-radius:8px;
padding:20px 50px;
text-align:center;
background:green;
}
a:active{
background:indigo;
}
style>
head>
<body>
<a href="paris.jpg">linka>
body>
html>
Visual Studio 2010使用方法 1 打开界面点击 文件---新建---项目 弹出新建项目界面,左边选择Visual C++,在右边选择空项目,然后在下面输入名称,存储位置,最后单击确定。之后会弹出界面(解决方案资源管理器)然后选择头文件,或源文件,单击右键---添加---新建项目 弹出 添加新项界面 左边 选择代码,右边选择 C++ 文件, 底部 输入名称,单击确定,之后会弹出新的界面,就可以编写
我们可以通过过渡属性(transition)来调整这个时间。
a:active{
background:indigo;
transition:3s;
}
读者可以做一个实验,改变其中transition的值,然后测试:avtive选择器所花费的时间。
ACTIVE示例
DOCTYPE html>
<html>
<head>
<title>atitle>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
div
{
width:100px;
height:100px;
background:red;
transition: 5s;
}
div:active
{
width:300px;
height:300px;
transition:3s;
}
style>
head>
<body>
<div>div>
body>
html>
这里面有两个transition,也就是意味着有两个过渡。
- 第一个过渡是激活active选择器,这时候 div:avtive 里的 transition 起作用。
- 第二个过渡是松开鼠标,图像的尺寸恢复正常的过程,这时候 div 里的 transition 起作用。
如果读者只设置了在 div 里面的 transition ,那么选择器的过渡时间也就默认为 div 里的 transition 了。
如果读者有兴趣也可以试一试transition和其他选择器的组合。









