css3的transition属性的使用
transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.
这个属性一般搭配:hover来使
下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear
div{ background-color:red; transition:background-color 1s linear 0.2s;}
div:hover{ background-color:yellow;}
<div>思思博士</div>
鼠标没放上去之前:
鼠标放上去0.2s后 的变化过程:
鼠标放上去的最终效果:
看到这里 大家对与这个属性的用法,心里面应该有了底了.
对于这个属性,每个参数都有一个对应的属性名,也就是说这个属性是可以拆开写的.
非简写形式:
/*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
div:hover{ background-color:yellow;}
transition还可以过渡多个效果.
div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;} div:hover{ background-color:yellow; color:#F00; height:100px;}
css3的transition属性的使用的更多相关文章
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...
- CSS3 : transition 属性
CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...
- CSS3使用transition属性实现过渡效果
transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现.它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的C ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
- CSS3之transition属性
transition属性可直译为"过渡",主要用于检索或设置对象变换的过渡. 语法: transition:property duration [timing-function] ...
- css3动画属性中的transition属性
一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- 跟我学习css3之transition
HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
随机推荐
- 实现一个简单的lazyman
function lazyman(name) { return new lazyman.fn.init(name); } lazyman.fn = lazyman.prototype = { cons ...
- EasyPlayer RTSP Android安卓播放器修复播放画面卡在第一帧bug
本文转自EasyDarwin团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/75717097 最近发现某些手机在运行EasyPlaye ...
- bzoj 4573 大森林
bzoj 4573 大森林 由于树上路径是唯一的,查询合法的两个点间路径长度显然与其他加点操作无关,所以可以离线处理,将所有的查询放在加点后. 这样我们可以对每棵树都在上颗树的基础上处理好形态后,处理 ...
- WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则
只要你用 XAML 写代码,我敢打赌你一定用各种方式使(nuè)用(dài)过 Grid.不知你有没有在此过程中看到过 Grid 那些匪夷所思的布局结果呢? 本文将带你来看看 Grid 布局中的 Bu ...
- 学习Selenium同学必看
本文转载 作者:灰蓝蓝蓝蓝蓝蓝链接:http://www.jianshu.com/p/5188cb3ab790來源:简书著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.更多技术博客 ...
- Sprint第一个冲刺(第三天)
一.Sprint介绍 今天我们完成了简单登录界面及美化的任务,完成了此次整个Sprint的百分之十五. 下面是实验截图: 二.Sprint周期 看板: 燃尽图:
- vue-router教程一(安装篇)
Installation安装 #直接下载/cdn https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com提供基于NPM的CDN链接.上述链接 ...
- Google服务,你都用了多少?
今天无意中发现这些东西,Google提供的服务还真是多,大家经常用到的不知道有哪些呢?就我个人而言,经常用到的就是Google搜索,Gmail邮箱,还有Google论坛了. Google Ad Sen ...
- webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instead
webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instea ...
- Linux中源码安装编译Vim
Linux中源码安装编译Vim Linux下学习工作少不了编辑器,Vim能使你的工作效率成倍的提高.在Ubuntu上安装vim使用命令直接安装很简单.但有时还是需要自己手动编译安装.例如: vim中的 ...