跟我学习css3之transition
HTML5和css3已经是将来的发展趋势，现在有很多移动端还有一些游戏公司已然使用它们开
发了比较成功的产品。我在2011年的时候也跟着技术潮流初浅的学习了html5+css3。毕竟那
时候我没有把学习的知识与实际工作结合起来。因此，这种没有实践的学习很容易忘记。在
去年年底的时候公司有个页面的浮层图标需要优化，就是鼠标划过能变大，划出复原。其实
要做这个功能很简单，也有很多的方法。但是，我后来就用了css3的transition属性。
简单的示例结构:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"> <title></title>
<style type="text/css">
#scrollTop { margin:0; _margin-bottom:30px; padding:0; height:77px; position:fixed; _position:absolute; right:2px; bottom:30px; _bottom:0; _top:expression(eval(document.documentElement.scrollTop +document.documentElement.clientHeight-this.offsetHeight-(parseInt (this.currentStyle.marginTop,10)||0)-(parseInt (this.currentStyle.marginBottom,10)||0))); z-index:60000;}
#scrollTop a {display:block; width:28px; height:77px; margin:0; padding:0; text-decoration:none; background:#FFF url (http://s.hqbcdn.com/assets/v3/images/scrollTop_ico.png) no-repeat;} </style>
</head>
<body>
<div style="display:none;" id="scrollTop"><a href="javascript:;"> </a></div>
</body>
</html>
方法一:
给元素添加:hover伪类样式
#scrollTop a:hover {width:84px; background:#b4b9bd url
(http://s.hqbcdn.com/assets/v2/images/scroll_top.jpg) no-repeat 50% 50%; text-
decoration:none; opacity:0.8;}
这个方式功能是达到了，但是交互的效果有点生硬，大家都喜欢运动效果的交互。
方法二:
为了有运动的交互效果，我们可以使用一些js框架的运动效果
这里我就使用大家常使用的jquery+jquery-easing.1.3.js来实现
$('#scrollTop a').hover(function(){
$(this).animate({width:'84px'}, 2000, 'easeInOutQuad')
},
function(){
$(this).animate({width:'28px'}, 2000, 'easeInOutQuad')
})
方法三:
使用css3的transition给#scrollTop a:hover多添加一条css，如下：
#scrollTop a:hover {transition:width .2s ease-out;}
这样是不是比方法二简单方便，当然这个方法是不是没有缺点，只要懂一点前端的就是知道
这个方法不适合IE10以下的浏览器。不过，也没有关系，这个方法是结合方法一的，所以在
IE以下的功能能实现只是没有交互的效果，谁叫他们使用IE是吧^_^!
以上说了那么多无关transition的话，只是为了下面来学习了解它
transition：支持从一个属性值平稳过渡到另一个属性值
语法：
transition: property duration timing-function delay;
property：规定设置过渡效果的 CSS 属性的名称。
duration：规定完成过渡效果需要多少秒或毫秒。
timing-function：规定速度效果的速度曲线。
delay：定义过渡效果何时开始。
实例
把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> transition </title>
<style type="text/css">
div {
width:100px;
height:100px;
background:red;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<div>transition</div>
</body>
</html>
transition还能同时过渡几个属性值如下：
例1：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> transition </title>
<style type="text/css">
div {
width:100px;
height:100px;
background-color:red;
color:#fff;
transition: width 2s, height 2s, color 2s;
-moz-transition: width 2s, height 2s, color 2s; /* Firefox 4 */
-webkit-transition: width 2s, height 2s, color 2s; /* Safari 和 Chrome */
-o-transition: width 2s, height 2s, color 2s; /* Opera */
}
div:hover {
width:300px;
height:300px;
color:yellow
}
</style>
</head>
<body>
<div>transition</div>
</body>
</html>
例2：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> transition </title>
<style type="text/css">
div {positionn:relative;}
img {
position:absolute;
left:0;
top:70px;
-webkit-transform:rotate(0deg);
-webkit-transition:left 1s linear, -webkit-transform 1s linear;
-moz-transform:rotate(0deg);
-moz-transition:left 1s linear, -moz-transform 1s linear;
-o-transform:rotate(0deg);
-o-transition:left 1s linear, -o-transform 1s linear;
}
div:hover img {
left:30px;
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
}
</style>
</head>
<body>
<div><img src="http://im.okhqb.com/images/im_entrance_big.jpg" alt="" /></div>
</body>
</html>
怎么样transition（变换）是不是用起来很是方便，不用写一句js就能实现很多的交互效果。
跟我学习css3之transition的更多相关文章
- HTML 学习笔记 CSS3(过度 transition)
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
- -_-#【CSS3】CSS3 gradient transition with background-position
CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> &l ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS学习笔记：transition
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 1.transit ...
- 学习animation、transition、transform和@keyframes的使用
当我们需要给页面添加动画效果时,需要用到CSS3的animation样式属性: 例如: animation: test 2s infinite; 其中test是动画的名称,2s是动画的时长,infin ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...
随机推荐
- 禁用绑定在Repeater的控件
实例一: 前台: <asp:Repeater ID="rp_bf" runat="server" onitemdatabound="rp_bf_ ...
- 编译安装x264
网上也有相应的教程,之所以在这里重申一遍,是因为我试了网上很多的编译方法,都出现了问题,为此将此编译安装方法记录下来. 首先是 获取x264的网站:http://www.videolan.org/de ...
- node的express中间件之static之ajax提交json
static中间件可以使客户端直接访问网站中的所有静态文件. 利用这个功能可以直接把服务器上的静态页面直接读取出来返回到客户端. 从客户端点击一个按钮,向服务器端发送数据.并且插入到mysql数据库中 ...
- Nginx 服务器开启status页面检测服务状态
一.Nginx status monitor 和apache 中服务器状态一样.输出的内容如: 第1列: 当前与http建立的连接数,包括等待的客户端连接:2 第2列: 接受的客户端连接总数目:20 ...
- DOM库及常用方法封装
节点 nodeType nodeName nodeValue 元素节点 1 大写的标签名 null 文本节点 3 #text 文本内容 注释节点 8 #comment 注释内容 document 9 ...
- C#对Excel的图文操作
1.打印Excel 目前的商业工具如水晶报表,ActiveReport等,都提供了灵活,强大的功能,但是对于比较特殊化的表格,特别是国内的一些应用,都是一个个的格子组成的,这样要是用线来一根根画就比较 ...
- django html模板继承 {%block 标记名｝ ｛%endblock%｝
对于url文件 url(r'^tp1/', views.tp1) 对于views文件,跳转到tp1.html 同时将list列表传到前端 def tp1(request): list = [1, 2, ...
- C#异步编程的一些认识
1.使用委托类型的BeginXXX,EndXXX 2.使用事件 3.使用aysnc,await关键字,会自动切换回UI线程,启动方法的线程可以被重用,线程没有阻塞.内部其实是封闭了Task类的Cont ...
- IE11 - Object doesn't support property or method 'includes'
IE不支持字符串的includes()方法:可以用indexOf()替换: includes()方法返回true和false; var str = "asdklmn": if(st ...
- Android开发实战之简单音乐播放器
最近开始学习音频相关.所以,很想自己做一个音乐播放器,于是,花了一天学习,将播放器的基本功能实现了出来.我觉得学习知识点还是蛮多的,所以写篇博客总结一下关于一个音乐播放器实现的逻辑.希望这篇博文对你的 ...