随着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. 安卓之DocumentsProvider应用场景以及优劣分析

    文章摘要 本文深入探讨了安卓DocumentsProvider的应用场景,分析了其优势与不足,并提供了简单的代码实现.DocumentsProvider是安卓系统中用于文件存储与访问的关键组件,为应用 ...

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

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

  3. 笔记本安装linux

    下载 桌面版 Ubuntu 镜像 服务器版 Ubuntu 镜像 使用 Balena Etcher 制作系统安装盘 (1)官方网站下载: 点我下载 (2)下载完毕软件之后,打开软件,选择我们下载好的系统 ...

  4. Vulkan学习笔记之开发环境搭建

    一.概述 最近因为工作需要开始学习Vulkan的相关知识,作为初学者,发现相对较好的学习资料莫过于vulkan-tutorial,在自己学习Vulkan的过程中,决定将自己的理解记录下来,一是为了加深 ...

  5. 解决vps掉线问题

    解决vps掉线问题 常见现象 在有时候遇到网络或者断电等一系列突发状况时,可能会导致在传输大文件或是好不容易拿到一个session断连了,所以有了这次学习解决这个问题的记录 场景复现 这里直接用kal ...

  6. JAVAAPI实现血缘关系Rest推送到DataHub V0.12.1版本

    DataHub 更青睐于PythonAPI对血缘与元数据操作 虽然开源源码都有Java示例和Python示例:但是这个API示例数量简直是1:100的差距!!不知为何,项目使用Java编写,示例推送偏 ...

  7. CentOS基线检测脚本

    本脚本适用于CentOS 7.5-7.9版本,其他版本不详 1.检查系统信息 查看代码 echo " " echo "########################## ...

  8. Pikachu漏洞靶场 Sql Inject（SQL注入）

    SQLi 哦,SQL注入漏洞,可怕的漏洞. 文章目录 SQLi 数字型注入(post) 字符型注入(get) 搜索型注入 xx型注入 "insert/update"注入 inser ...

  9. Baidu Comate实践指南，惊艳了我...

    1 啥是Baidu Comate Comate是百度开发的编程大模型工具,它基于文心大模型,结合百度积累多年的编程现场大数据和外部优秀开源数据,为我们生成更符合实际研发场景的优质代码:它能提升编码效率 ...

  10. Centos7 Zabbix3.2安装(yum)

    http://repo.zabbix.com/zabbix/3.2/rhel/7/x86_64/  #官网下载地址(只包含zabbix的应用包) ftp://47.104.78.123/zabbix/ ...