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> < ...
随机推荐
- ceph集群搭建详细教程（ceph-deploy）
ceph-deploy比较适合生产环境,不是用cephadm搭建.相对麻烦一些,但是并不难,细节把握好就行,只是命令多一些而已. 实验环境 服务器主机 public网段IP(对外服务) cluster ...
- 太牛叉了！国产 AI 智能体惊艳问世，全面致敬 FastGPT！
太震撼了!太厉害了!昆仑万维正式发布了「天工 SkyAgents」平台,助力大模型走入千家万户.你听听,这个名字一听就有一种巧夺天工的感觉,技艺那是相当的高超. 这个平台基于昆仑万维「天工大模型」打造 ...
- OpenEuler22.03安装最新版本Docker
一.环境及问题 操作系统环境如下: 操作系统:OpenEuler 22.03 LTS 安装方式:最小化安装 在操作系统安装完毕如果直接采用dnf或者yum方式安装docker: sudo dnf in ...
- 深度解析 PyTorch Autograd：从原理到实践
本文深入探讨了 PyTorch 中 Autograd 的核心原理和功能.从基本概念.Tensor 与 Autograd 的交互,到计算图的构建和管理,再到反向传播和梯度计算的细节,最后涵盖了 Auto ...
- Pikachu漏洞靶场 XSS（跨站脚本攻击）
XSS 关于xss的我也是一知半解,所以只放出payload来. 反射型xss(get) 修改maxlength属性之后提交如下内容: <script>alert(/xss/);</ ...
- .net Core中间件实战
新建一个ASP.NET Core Web Application 项目选中空模板 然后为项目添加一个Microsoft.Extensions.Logging.Console 由于我用的.net cor ...
- select/poll/epoll 优缺点比较
校招应届生简历中,有一个 C++ 项目出现的频率非常高... select 1024 fd 限制(可修改,麻烦) 需要遍历才知道哪些 fd ready 副作用:修改传入 fd_set,每次需要重新赋值 ...
- 手把手带你玩转HetuEngine：资源规划与数据源对接
本文分享自华为云社区<[手把手带你玩转HetuEngine](三)HetuEngine资源规划>,作者: HetuEngine九级代言 . HetuEngine支持在服务层角色实例和计算实 ...
- 昇腾实战丨DVPP媒体数据处理图片解码问题案例
摘要:本期就分享几个关于DVPP图片解码问题的典型案例,并给出原因分析及解决方法. 本文分享自华为云社区<DVPP媒体数据处理图片解码问题案例>,作者:昇腾CANN . DVPP(Digi ...
- 云小课｜云数据库RDS实例连接失败了？送你7大妙招轻松应对
摘要:自从购买了RDS实例,连接失败的问题就伴随着我,真是太难了.不要害怕,不要着急,跟着小云妹,读了本篇云小课,让你风里雨里,实例连接自此畅通无阻! 顺着以下几个方面进行排查,问题就可以迎刃而解~ ...