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> < ...
随机推荐
- 【笔记整理】忽略https证书校验
import requests url = "https://sam.huat.edu.cn:8443/selfservice/" # 默认不忽略ssl证书,如果有证书问题的网站会 ...
- ubuntu设置系统字符集为中文
第一步:查看自己系统的字符集 先查看系统的默认字符集格式:locale 或者cat /etc/default/locale root@JumpServer-APP-T02:~# locale LANG ...
- Guava常用工具类总结
=== -"我想写得更优雅,可是没人告诉我怎么写得更优雅" -"Null的含糊语义让人很不舒服.Null很少可以明确地表示某种语义,例如,Map.get(key)返回Nu ...
- GDAL从二进制数据流中构造数据集
目录 1. 概述 2. 实现 1. 概述 参看<从二进制数据流中构造GDAL可以读取的图像数据>这篇文章.这个问题的内涵在于,处理图像时都会将其读取成宽X高X波段的三维数组的内存Buffe ...
- 从热爱到深耕，全国Top10开源软件出品人探索“开源云上行”
本文分享自华为云社区<[先锋开发者云上说]从热爱到深耕,全国Top10开源软件出品人探索"开源云上行">,作者:华为云社区精选. <2022-2023 中国开源开 ...
- AUC/ROC：面试中80%都会问的知识点
摘要:ROC/AUC作为机器学习的评估指标非常重要,也是面试中经常出现的问题(80%都会问到) 本文分享自华为云社区<技术干货 | 解决面试中80%问题,基于MindSpore实现AUC/ROC ...
- 养殖场新来了个“AI管家”
摘要:定制化算法+端侧一键部署,打通AI全流程. 本文分享自华为云社区<[云享·伙伴]第4期:养殖场新来了个"AI管家">,作者: 华为云社区精选. 民以食为天.肉类是 ...
- 联合枚举类型：从C语言看枚举与联合类型到TypeScript/Python
枚举,还是从hello world 开奖,大部分的人应该是从C开始的,比如我.当然,这部分也可以跳过. 详说枚举类型: C语言中的enum 计算机入门时候有点印象: enum是C语言中的一个关键字,e ...
- centos8 测地卸载php5.6 与卸载php7
centos8 yum php 默认安装 php7.1.2 我想卸载php7 ,安装php5.6 yum remove php 无法彻底卸载干净.必须强制删除,使用下面命令查看全部php软件包 rpm ...
- 火山引擎DataLeap的Data Catalog系统公有云实践 （下）
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Data Catalog公有云遇到的挑战 Data Catalog经历了一个从0到1在火山引擎公有云部署并逐步优化 ...