CSS3之transition
随着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的更多相关文章
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- HTML 学习笔记 CSS3(过度 transition)
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...
- -_-#【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 ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...
- 跟我学习css3之transition
HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...
- CSS3 ： transition 属性
CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...
- 理解CSS3属性transition
一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...
- css3中transition和display的坑
不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...
随机推荐
- bash shell笔记整理——linux时钟和hwclock命令
Linux中的时钟 在linux中,分为了如下两种时钟: 系统时钟:由linux内核通过CPU的工作频率进行的计时. 硬件时钟:主板上的cmos芯片时钟,就是可以在bios中设定的时间.(RTC,re ...
- ElasticSearch之Refresh API
使用本方法,显式的执行refresh操作. 默认情况下,ElasticSearch启动后台任务,周期性执行refresh操作,周期使用参数index.refresh_interval控制. 本方法触发 ...
- 【笔记】springSecurity-OAuth2.0-授权模式演示
SpringSecurityOauth2架构 介绍 流程: 用户访问,此时没有Token.Oauth2RestTemplate会报错,这个报错信息会被Oauth2ClientContextFilter ...
- Shell脚本实践总结
对比大小 符号用法:(必须使用双括号) < 小于 (( "$a" < "$b" )) <= 小于等于 (( "$a&q ...
- LeetCode 递归篇(70、22、98、104)
70. 爬楼梯 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: ...
- Java 获取PDF中的数字签名信息
一.概述及程序环境要求 本文以Java代码演示如何获取PDF文档中的数字签名信息,包括签名人.签名位置.日期.原因.联系方式.签名在文档中的坐标等等. 程序环境包括: Spire.Pdf.jar(ja ...
- GaussDB(DWS)条件表达式函数返回错误结果集排查
摘要:条件表达式函数中出现结果集不一致问题,我们首先要考虑是否入参数据类型不一致导致出参不一致. 本文分享自华为云社区<GaussDB(DWS)条件表达式函数返回错误结果集排查>,作者:y ...
- 物联网设备上云难？华为云IoT帮你一键完成模型定义，快速在线调试设备
摘要:在不到3分钟的操作里,不仅完成了一款智慧烟感设备在云端的模型定义,还通过在线调试了解到了设备和远端通信的过程. 本文分享自华为云社区<物联网设备上云难?华为云IoT帮你一键完成模型定义,快 ...
- DTSE Tech Talk丨第2期：1小时深度解读SaaS应用系统设计
摘要:介绍在SaaS场景下如何技术选型,SaaS架构设计中关键的技术点等内容. 本文分享自华为云社区<DTSE Tech Talk丨第2期:1小时深度解读SaaS应用系统设计>,作者: 华 ...
- 想从单体架构演进到分布式架构，SBA 会是一个不错的选择
摘要:SBA 可以看成是单体架构和微服务架构之间的一个折中方案,它也是按照业务领域进行服务划分,但服务划分的粒度相比微服务要更粗.从单体架构演进到 SBA,会比直接演进到微服务架构更加容易. 本文分享 ...