☀【动画】过渡 transition
CSS3 动画系列3-transition（过渡） √
http://www.css88.com/archives/5403
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
background: #F00;
transition: width 2s, height 2s, background 2s;
}
.box1:hover {
width: 200px;
height: 50px;
background: #FF0;
}
</style>
</head>
<body>
<div class="box1">如果丘处机没有路过牛家村，中国将是最发达国家</div>
</body>
</html>
手机支付宝
http://qianbao.alipay.com/index.htm
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
position: relative;
color: navy;
font-size: 100px;
font-family: arial;
opacity: 0;
/* transition-property transition-duration transition-timing-function transition-delay */
-webkit-transition: all .8s ease .3s;
-moz-transition: all .8s ease .3s;
transition: all .8s ease .3s;
}
.word1 {
left: -100px;
}
.word2{
left: 100px;
}
.anim-word1 {
left: 0;
opacity: 1;
}
.anim-word2 {
left: 0;
opacity: 1;
}
</style>
</head>
<body>
<span class="word1">shanghai</span>
<span class="word2">hangzhou</span>
<script>
var word = document.getElementsByTagName('span')
var word1 = word[0]
var word2 = word[1]
setTimeout(function() {
word1.className = 'word1 anim-word1'
word2.className = 'word2 anim-word2'
}, 1000)
</script>
</body>
</html>
☀【动画】过渡 transition的更多相关文章
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- transition 动画过渡
1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS3之边框样式（动画过渡）
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- css3动画（transition）属性探讨
在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- css动画过渡
css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...
- 初学vue----动画过渡transition简单部分
使用动画效果要用transition包裹,transition(<trsnsition name="xx"><div></div></tr ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
随机推荐
- Angle
1 What is Angle. The goal of ANGLE is to allow Windows users to seamlessly run WebGL and other OpenG ...
- 【转】Windows10下80端口被PID为4的System占用导致Apache无法启动的分析与解决方案
昨天刚更新了Windows10,总体上来说效果还是蛮不错的,然而今天在开启Apache服务器的时候却发现,Apache莫名其妙的打不开了,起初以为是权限的问题,于是使用管理员身份的控制台去调用命令ne ...
- QtSQL学习笔记（4）- 使用SQL Model类
除了QSqlQuery,Qt提供了3个高级类用于访问数据库.这些类是QSqlQueryModel.QSqlTableModel和QSqlRelationalTableModel. 这些类是由QAbst ...
- Qt-获取主机网络信息之QHostInfo
Qt中提供了几个用于获取主机网络信息的类,包括QHostInfo.QHostAddress.QNetworkInterface以及QNetworkAddress.在本节中,我将在这里总结QHostIn ...
- Linux C 程序 数组(EIGHT)
数组 1.一维数组的定义和使用,声明时数组默认值为0 int a[n]; 这样定义不合法,n是变量 ,数组规定[]里只能为常量 ] = {,,,,,,,,,}; a[] = {,} ;//部分赋值 , ...
- WCF SOA服务应用
WCF是微软官方推出的一个基于服务的整合框架,它整合了以前的Web Service.MSMQ.Remoting等通信技术,通过灵活的配置,让服务编程更加容易.可扩展.这篇文章主要目的就是带领大家从开发 ...
- 基于Hadoop生态圈的数据仓库实践 —— ETL
使用Hive转换.装载数据 1. Hive简介 (1)Hive是什么 Hive是一个数据仓库软件,使用SQL读.写.管理分布式存储上的大数据集.它建立在Hadoop之上,具有以下功能和 ...
- CentOS安装mplayer
据说mplayer相当于windows下的暴风影音,那么今天就来安装上mplayer. 安装的大体步骤: 安装mplayer需要安装,解码器,mplayer,皮肤. 这三个包你都可以在mplayer官 ...
- python【第五篇】常用模块学习
一.主要内容 模块介绍 time &datetime模块 random os sys shutil json & pickle shelve xml处理 yaml处理 configpa ...
- linux安装mysql出现Could NOT find Curses (missing CURSES_LIBRARY CURSES_INCLUDE_PATH)，提示解决方法
[root@localhost mysql-5.5.11]# cmake . 出现以下错误提示: -- Could NOT find Curses (missing: CURSES_LIBRARY ...