transition属性定义动画

xiaoxiao2021-02-28  85

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,希望对你们有所增益。

转载请注明原文地址: https://www.6miu.com/read-96482.html

最新回复(0)