随着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. Kernel Memory 入门系列：生成并获取文档摘要

    Kernel Memory 入门系列:生成并获取文档摘要 前面在RAG和文档预处理的流程中,我们得到一个解决方案,可以让用户直接获取最终的问题答案. 但是实际的业务场景中,仍然存在一些基础的场景,不需 ...

  2. 华企盾DSC防泄密软件：svn、git更新后有感叹号常见处理方法

    1.查看客户端日志检查TSVNcache.exe进程是否是legal:1 2.TSVNcache.exe进程是否允许访问未配置加密进程的后缀 3.svn服务器不是加密进程也未装网络驱动,或者加密类型未 ...

  3. 华企盾DSC邮件白名单问题常见处理方法

    1.先检查邮件白名单服务器配置测试连接的通(不通可能是协议未开或者账号密码错误) 2.检查邮件发送端口是否配置(常见的有25和s465.s587) 3.邮件是否到发件箱或者收件箱的垃圾邮件里面了 4. ...

  4. 【大语言模型基础】60行Numpy教你实现GPT-原理与代码详解

    写在前面 本文主要是对博客 https://jaykmody.com/blog/gpt-from-scratch/ 的精简整理,并加入了自己的理解. 中文翻译:https://jiqihumanr.g ...

  5. WPF通用权限平台系统，正在研发中(基本于：VS2019 WPF+WebAPI(.NET 6.0)+SqlSugar +SQLServer2014)

  6. 带你掌握数仓的作业级监控TopSQL

    摘要:目前TopSQL功能被用户广泛使用,是性能定位.劣化分析.审计回溯等重要的基石,为用户提供覆盖内存.耗时.IO.网络.空间等多方面的监控能力. 本文分享自华为云社区<GaussDB(DWS ...

  7. 华为云张昆：支持全场景全业务，GaussDB加速企业数字化转型

    云.AI.5G等技术驱动,数据库行业迎来新的需求,云数据库也在不断演进升级.依托华为云与华为云Stack,通过全栈软硬件优化,华为云GaussDB进行了进阶与革新,以统一的架构,支持关系型与非关系型的 ...

  8. 带你彻底搞懂高性能网络模式Reactor 和 Proactor

    ​​​​摘要:无论是 Reactor,还是 Proactor,都是一种基于「事件分发」的网络编程模式,区别在于 Reactor 模式是基于「待完成」的 I/O 事件,而 Proactor 模式则是基于 ...

  9. 华为云AOM 2.0版本发布

    摘要:AOM作为华为云面向租户的统一运维门户,将在7月1日重磅发布2.0版本. 本文分享自华为云社区<华为云AOM发布2.0版本,3大特性亮相>,作者:华为云PaaS小助手. 6月16日华 ...

  10. JVM内存模型，你看这一篇就够了

    摘要:JVM是一种用于计算设备的规范,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的. 本文分享自华为云社区<[云驻共创]JVM内存模型的探知之旅>,作者:多米 ...