随着css3不断地发展，越来越多的页面特效可以被实现。

例如当我们鼠标悬浮在某个tab上的时候，给它以1s的渐进变化增加一个背景颜色。渐进的变化可以让css样式变化得不那么突兀，也显得交互更加柔和。

那么怎么实现这种效果呢？

css3提供了transition属性，可以用来控制css属性变化的速度。

举一个盒子变化的例子，html代码如下所示。

<body>

    <p>这是一个盒子: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>

    <div class="box"></div>

</body>

css内容则如下所示。

.box {

    border-style: solid;

    border-width: 1px;

    display: block;

    width: 100px;

    height: 100px;

    background-color: yellow;

    -webkit-transition:width 2s, height 2s,

        background-color 2s, -webkit-transform 2s;

    transition:width 2s, height 2s, background-color 2s, transform 2s;

}

.box:hover {

    background-color: #FFCCCC;

    width:200px;

    height:200px;

    -webkit-transform:rotate(180deg);

    transform:rotate(180deg);

}

transition属性可以控制宽和高变化持续时间，如上面的css，.box的变化速度为宽和高都持续变化2秒。

其实transition是一种简写方式，其实可以具体写各种属性和设置，例如下面是一段对文字的css变化的编写：

#change {

    position: relative;

    transition-property: font-size;

    tansition-duration: 1s;

    transiton-delay: 1s;

    font-size: 14px;

}

#change:hover {

    tansition-property: font-size;

    transition-duration: 2s;

    tansition-=delay: 1s;

    font-size: 36px;

}

当然用简写是最好的，效率最高，例如：

  transition:  all 1s;

CSS3之transition的更多相关文章

  1. 弄清 CSS3 的 transition 和 animation

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

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

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

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

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

  4. css3的transition效果和transfor效果

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

  5. CSS3之transition&transform

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

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

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

  7. 跟我学习css3之transition

    HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...

  8. CSS3 ： transition 属性

    CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...

  9. 理解CSS3属性transition

    一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...

  10. css3中transition和display的坑

    不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...

随机推荐

  1. Oracle参数文件spfile

    spfile:server parameter file. spfile只能通过OEM(oracle enterprise manager)软件或者alter system命令进行修改. spfile ...

  2. 华企盾DSC客户端连接服务器正常，控制台找不到客户端

    1.首先客户端查一下策略状态,看一下客户端在哪个组,是否在回收站,或者无策略组: 2.查看一下数据库的CLIENT_GROUP_TABLE_表中是否有查出来的组,CLIENT_GROUP_TABLE_ ...

  3. 【C#】【串口通信（Serial Port）】【实例】建议串口调试WinForm桌面应用实例——已实现功能<存在未知BUG>

    1.界面组件 2.界面实现代码 1 namespace WinFormsApp1 2 { 3 partial class Form1 4 { 5 /// <summary> 6 /// R ...

  4. MyBatisPlus配置类-配置分页插件，注册为bean对象

    import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; import org.mybatis.spring.a ...

  5. 模拟QQ登陆

    public class QQLogin { public static void main(String[] args) { int id1 = 123456; String pwd1 = &quo ...

  6. C# 获取另一程序控件，改变值，触发事件

    [DllImport("User32.dll", EntryPoint = "FindWindow")]private static extern IntPtr ...

  7. K8s和声明式编程

    转载:原文链接 认识k8s之后,他的操作模式对我来说是一种很不错的体验.他提供了更接近现实世界的面向对象接口. 什么是k8s? Kubernetes(K8s)是一种开源容器编排平台,用于自动化部署.扩 ...

  8. Skywalking(8.7)安装以及docker镜像打包

    Skywalking安装以及docker镜像打包 Skywalking版本:apache-skywalking-apm-es7-8.7.0 ES版本:7.17.2 一.下载Skywalking的安装包 ...

  9. Codeforces 1202D 思维 构造

    原题链接 题意 每组数据给我们一个n,然后要求我们用{1, 3, 7}这三种字符来组成一个长度小于1e5的序列,要求其中为1337的子序列(不要求相邻)的数量恰好为n 思路 首先可以考虑最简单的一种构 ...

  10. 【API 进阶之路】做 OCR 文字识别，谁说必须要有 AI 工程师？

    摘要:有些功能还真不能光凭自己的直觉和认识,来自一线的声音才是最真实的用户需求.比方说名片录入的需求. 在公司技术委员会副主席这个位置上干了有几个月了,期间,我一方面给研发团队整理各种文档资料,做技术 ...