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> < ...
随机推荐
- 一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
前言 经常看到有小伙伴在技术群里问有没有什么好用且快速的开发框架推荐的,今天就给大家分享一款基于MIT License协议开源.免费的.NET Core快速开发框架.支持多种前端UI.内置代码生成器. ...
- 字节国际化TnS算法实习的碎碎念
Motivation 在保研之后,我和南大的导师投了一篇个性化联邦学习的CVPR作为毕设.之后感觉就没什么事了,于是想着找个实习吧,第一个想法就是去字节实习,也只投了字节(别学我,还是多投一些哈哈,找 ...
- 华企盾DSC导入离线客户端没有获取到信息
安装客户端的时候禁用了网卡,导致导入离线客户端获取不到信息. 解决方法: 1.启用网卡,重启电脑 2.启用网卡,重装客户端
- 云图说丨初识华为云OrgID
本文分享自华为云社区<[云图说]第282期 初识华为云OrgID:轻松实现统一帐号.统一授权>,作者: 码上开花_Lancer. 组织成员帐号 OrgID是面向企业提供组织管理.企业成员帐 ...
- openGemini v0.2.0版本正式发布：5大特性全面增强
摘要:openGemini是华为云面向物联网和运维监控场景开源的一款云原生分布式时序数据库,兼容InfluxDB API,具有高性能.高并发.高扩展等特点. openGemini是华为云面向物联网和运 ...
- 震惊，PostGIS还可以这样用！！！
摘要:PostGIS为PostgreSQL提供了空间数据库分析能力,是目前业界主流的地理数据库之一,提供如下空间信息服务功能:空间对象.空间索引.空间操作函数和空间操作符等.在GaussDB 中,目前 ...
- THOR：MindSpore 自研高阶优化器源码分析和实践应用
摘要:这篇文章跟大家分享下THOR的实践应用.THOR算法的部分内容当前已经在MindSpore中开源 本文分享自华为云社区<MindSpore 自研高阶优化器源码分析和实践应用>,原文作 ...
- 快来一起玩转LiteOS组件：RHas
摘要:RHash是一个C语言编写的哈希函数库,用于计算和验证磁力链接和各种消息摘要的控制台实用程序. 本文分享自华为云社区<LiteOS组件尝鲜-玩转RHas>,作者:Lionlace . ...
- JS引擎(1):JS引擎擂台赛，JavaScript引擎的特征比较及术语科普
上篇介绍过JavaScript引擎的历史,<JS引擎(0):起底各种JavaScript引擎群雄争霸之路> 一些流行的 JavaScript 引擎 SpiderMonkey ,Brenda ...
- vue2升级vue3：class component的遗憾
在vue2,class 写法真的非常爽 import { Component as tsc } from 'vue-tsx-support'; import { Component, Watch } ...