transition属性定义动画
来源：互联网 发布：avtaobao淘宝最新地址 编辑：程序博客网 时间：2024/05/29 14:42
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，希望对你们有所增益。
阅读全文
0 0
- transition属性定义动画
- 动画--过渡属性 transition-property
- css3动画属性--transition（转换）
- 【CSS3】动画--过渡属性 transition-property
- css动画的transition渐变属性
- transition动画
- transition属性
- 利用css3属性：transition-duration来做简单的动画
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中动画效果新属性----transition&transform
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中和动画有关的属性transform、transition 和 animation
- css3动画模块transform transition animation属性解释
- CSS3中的动画，animation、transition和transform属性的运用
- android5.0的transition属性设置动画，初步使用。
- css3动画属性详解之transform、transition、animation
- CSS3中的动画，animation、transition和transform属性的运用
- CSS动画中的Animation和Transition全属性实例
- ssh 本地和远端端口转发
- 根据压缩包路径读取此压缩包内文件个数
- Android马赛克效果MosaicView
- volatile 关键字作用
- 指针加减运算
- transition属性定义动画
- jquery常见面试题
- [LeetCode]538. Convert BST to Greater Tree
- ftp服务器搭建
- Linux简介
- Android paint 图形混合模式
- javascript写贪吃蛇
- 39个前端精美后台模板
- 剑指offer--合并两个排序的链表
