CSS3新增属性:transition属性,可以定义简单动画!
下面给大家演示一个demo,抛砖引玉。
而且不需要使用 js!
CSS代码如下
<style>
.rbar.mobile{position:relative;}
.rbar-code{position: absolute;left:
0;bottom:
0;width:
0;height:
0;overflow: hidden;transition: all ease-
in-out
0.5s;}
.rbar-code img{width:
150px;height:
150px;box-sizing: border-box;vertical-align: middle;}
.rbar:hover .rbar-code{width:
150px;height:
150px;bottom:
0;left: -
155px;}
</style>
html代码如下
<body>
<a
class="rbar mobile" href="" title="微信扫一扫手机学习">
<div class="rbar-code"><img src="images/weixincode.jpg"/></div>
</a>
</body>
效果图如下
以上代码知识一个简单的小demo,希望对你们有所增益。