body 里的div
<div class="test">
<a href="#" class="aLink">
<span class="txt">¥29</span>

<span class="txt2">
<span>this is a demo</span>
Apple
</span>
<span class="btn">
<span></span>
</span>
</a>
</div>
css样式
@charset "utf-8";
/* CSS*/
*{margin:0; padding:0; font-size:12px; font-family:Verdana;}
img{border:none;}
body{
background:url(img/stucco.png);
}
.test{
width:320px;
height:90px;
margin:30px auto;
background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
background:#A9DB80;
box-shadow:0 0 3px #999;
border-radius:3px;
transition:1s all ease;
-webkit-transition:0.5s all ease;
-moz-transition:0.5s all ease;
-ms-transition:0.5s all ease;
-o-transition:0.5s all ease;
overflow:hidden;
}
.test .aLink{
display:block;
width:318px;
height:88px;
background:-webkit-linear-gradient(center top , #FFF 2%);
background:-moz-linear-gradient(center top , #FFF 2%);
background:-ms-linear-gradient(center top , #FFF 2%);
background:-o-linear-gradient(center top , #FFF 2%);
box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius:3px;
-webkit-border-radius:3px;
-ms-border-radius:3px;
position:relative;
text-decoration:none;
border:#484848 solid 1px;
overflow:hidden;
}
.test .aLink .txt{
position:absolute;
font-size:28px;
color:#6D954E;
left:18px;
top:26px;
opacity:0;
-webkit-transition:0.2s all ease;
-moz-transition:0.2s all ease;
-ms-transition:0.2s all ease;
-o-transition:0.2s all ease;
transition:0.2s all ease;
}
.test .aLink .img{
position:absolute;
width:70px;
height:70px;
display:block;
z-index:2;
top:12px;
left:10px;
-webkit-transition:0.2s all ease;
-moz-transition:0.2s all ease;
-ms-transition:0.2s all ease;
-o-transition:0.2s all ease;
transition:0.2s all ease;
}
.test .aLink .txt2{
font-size:32px;
color:#FFF;
width:140px;
overflow:hidden;
display:block;
text-shadow:0 0 2px #999999;
position:absolute;
left:80px;
text-align:center;
top:10px;
font-family:"Comic Sans MS", cursive;
}
.test .aLink .txt2 span{
font-size:14px;
color:#FFF;
display:block;
}
.test .aLink .btn{
width:80px;
display:block;
height:88px;
position:absolute;
right:0;
top:0;
border-left:#484848 solid 1px;
box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
-o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
}
.test .aLink .btn span{
display:block;
width:40px;
height:40px;
background:url(img/arrow_down.png) center center no-repeat #333;
margin:24px auto;
border-radius:50%;
-webkit-transition:0.3s all ease;
-moz-transition:0.3s all ease;
-ms-transition:0.3s all ease;
-o-transition:0.3s all ease;
}
/*动画*/
.test:hover{
box-shadow:0 0 10px #666;
box-shadow:0 0 10px #666;
}
.test:hover .img{
width:150px;
height:150px;
left:-26px;
top:-30px;
opacity:0;
}
.test:hover .txt{
opacity:1;
}
.test:active{
box-shadow:0 0 0px #999;
background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
}
.test:active .aLink{
box-shadow:inset 2px 2px 3px #666666;
}
.test:active .btn{
box-shadow:inset 1px 1px 1px #666666;
box-shadow:inset 1px 1px 1px #666666);
}
.test:active .txt{
color:#A9DB80;
}
.test:active .btn span{
width:60px;
height:60px;
margin-top:15px;
background-size:60%;
}
网友评论