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> < ...
随机推荐
- EEPROM M24C64替换AT24C64出现读取数据为0xff情况解决办法
EEPROM M24C64替换AT24C64出现读取数据为0xff情况解决办法 硬件情况 STM32F103CBT6+模拟IIC,主频72MHz,IIC上拉电阻3.3kΩ 出现原因 在IIC停止信号上 ...
- Python——第四章：内置函数（下）
内置函数的使用方法: locals:函数会以字典的类型返回当前位置的所有局部变量 globals:函数会以字典的类型返回全部局部变量 zip: 可以把多个可迭代内容进行合并 sorted: 排序 fi ...
- C 按位显示二进制
转载:https://mp.weixin.qq.com/s?__biz=Mzk0NDYzNTI1Ng==&mid=2247483733&idx=2&sn=728c93b046d ...
- 利用腾讯快捷登录协议截取 QQ ClientKey / QQKey 实战课程
本文主要通过利用腾讯网页快捷登录协议来模拟访问并截取已登录 QQ 客户端的Token.Uin.ClientKey.Skey.P_skey等. Step 1. https://ssl.xui.ptlog ...
- 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 02.AI自定义任务和观察器中断
斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本文章对应课程第十一章 42节.这篇文章会进一步地为AI添加新功能,创建自定义任务,允许AI发射子弹,并且讲解观 ...
- Mybatis源码1JDBC->mybatis主要流程->mybatis Excutor简介
=== 一丶mybatis概述 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作.My ...
- 【程序员的福音】一款C#开源的GitHub加速神器
前言 作为一个程序员你是否会经常会遇到GitHub无法访问(如下无法访问图片),或者是访问和下载源码时十分缓慢就像乌龟爬行一般.之前有尝试过手动修改host文件来解决网站的访问问题,以及更换网络但还是 ...
- vue获取公网ip
<template> <div> <div>Your Public IP: {{publicIP}}</div> </div> </t ...
- Microsoft Docs & Learn Champion 冠军赛
2021年个人作为微软MVP,参与了Microsoft Docs & Learn Champion 冠军赛,经过一年的努力,全面宣传了微软的技术. 以下是Microsoft Docs & ...
- DWS临时内存不可用报错: memory temporarily unavailable
本文分享自华为云社区<DWS临时内存不可用报错: memory temporarily unavailable>,作者:漫天. 1.定位报错的DN/CN 当出现memory tempora ...