纯css3实现点击动画

浏览:1275 发布日期:2016/10/25 分类:css3 关键字:

 这个关键在于css的伪类选择器:target


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css触发点击动画</title>
<style>
.btn1,.box{
display:flex;
position: relative;
}
.btn1>a{
display: block;
margin:5px;
width: 100px;
height:100px;
background: #a58c4d;
}

#a,#b,#c{
margin:5px;
width:150px;
height:100px;
background:#662;
position: absolute;
top:0;
}
#a{
left:0px;

}
#b{
left:160px;
}
#c{
left:320px;
}
#a:target,#b:target,#c:target{
width:150px;
height:100px;
background: #e9e8e7;
-webkit-animation-name:slide;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
/*animation-fill-mode:forwards;*/


}
@-webkit-keyframes slide{
0% {top:0px;}
50% {top: 300px;}
100% {top: 0px;}
}


</style>
</head>
<body>
<div>
<a href="#a">按钮a</a>
<a href="#b">按钮b</a>
<a href="#c">按钮c</a>
</div>
<div>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>
</body>
</html>

前端开发QQ群:577185192

1476844455471.png



评论(3 相关
一嗨租车:http://yuansaibi.com
回复 小恒 2017-04-14
MAKING-H 无人售货机加盟 http://www.makingh.com
回复 币安 2017-11-16
币安网:http://www.lelev.com 大陆重新开放注册。

发表评论

必填

选填

选填