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:;">&nbsp;</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的更多相关文章

  1. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  2. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  3. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  4. -_-#【CSS3】CSS3 gradient transition with background-position

    CSS3 gradient transition with background-position <!DOCTYPE html> <html> <head> &l ...

  5. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. CSS学习笔记：transition

    CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 1.transit ...

  7. 学习animation、transition、transform和@keyframes的使用

    当我们需要给页面添加动画效果时,需要用到CSS3的animation样式属性: 例如: animation: test 2s infinite; 其中test是动画的名称,2s是动画的时长,infin ...

  8. CSS3之transition&transform

    参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...

  9. 使用CSS3的“transition ”属性控制长宽度的缓慢变化

    有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...

随机推荐

  1. 【UVa】11212 Editing a Book（IDA*）

    题目 题目     分析 get一下IDA*的技巧,感觉总体来说不难,主要是剪枝比较难想. 这是lrj的代码,比较通俗易懂,关键就是选定一个区间再取出来,插入到一个位置,接下来转移到这个状态.     ...

  2. spring 配置双数据源并读写分离

    摘自 开源项目Ibase4j    关键思想在于AbstractRoutingSource 类 还有方法名称和切入点去控制使用哪个数据源    1.首先在配置文件配置多个数据源 并且交给继承自spri ...

  3. react-router4 嵌套路由

    先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, R ...

  4. 怎么分辨linux是红帽还是Centos系统

    为什么需要分辨呢?因为centos是rhel的衍生版本,虎鼠傻傻你分不清楚!,你也可以使用yum,如果是rhel则报RHN disenable错!,还是用下面的专业些的command来搞吧! cat ...

  5. .net Reactor之exe、dll文件混淆

    .net Reactor之exe.dll文件混淆 .net Reactor的主要功能: 1.是对dll文件.exe文件进行反编译混淆 2.对dll进行内部加锁,限制其使用的固定机器.固定时间.部署次数 ...

  6. OpenLayers 3 之 地图视图（View）

    OpenLayers 3 之 地图视图(View) 初始化一幅地图,必备的三要素之一视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对 ...

  7. 思科ASA 基础学习

    ASA int e0/0 ip add 192.168.1.1 24nameif insidesecruity-leve 100 int e0/0/0ip add 192.168.2.1 24name ...

  8. 初识tornado

    Tornado 参考:  http://www.cnblogs.com/wupeiqi/articles/5702910.html Tornado 是 FriendFeed 使用的可扩展的非阻塞式 w ...

  9. fatal error C1010: 在查找预编译头时遇到意外的文件结尾 (转)

    错误描述:fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "stdafx.h"”? 错误分析:     此错误发生 ...

  10. Python格式符说明

    格式化输出 例如我想输出 我的名字是xxxx 年龄是xxxx name = "Lucy"age = 17print("我的名字是%s,年龄是%d"%(name, ...