☀【动画】过渡 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()可以实现按比例放大或者缩小功能. ...
随机推荐
- bzoj3208：花神的秒题计划I
思路:因为Q.S.B操作总和不超过100,因此怎么暴力怎么写....当然记忆化搜索还是要的 #include<cstdio> #include<iostream> #inclu ...
- Wix: Using Patch Creation Properties - Minor Update
Based on the project created in Wix: Using Patch Creation Properties - Small Update, Following chang ...
- Batch: Display & Redirect Output
Batch How To ... Display & Redirect Output http://www.robvanderwoude.com/battech_redirection.php ...
- free -m
free -m total used free shared buffers cached Mem: 7760 1572 6187 0 9 ...
- linux RedHat6.4下nginx安装
安装rpm 检测是否有已安装rpm包: rpm–qa | grep pcre rpm–qa | grep zlib rpm–qa | grep openssl 若没有则需安装(这些包可以在redhat ...
- 少年Vince之遐想
本文999纯水贴,然转载仍需注明: 转载至http://www.cnblogs.com/VinceYang1994/ 昨天去姑姑家拜年,表哥房间的角落里有一架缠有蜘蛛网的遥控直升飞机. 打开飞机及遥控 ...
- yoga-moblie-res
- PHP之session_start()详解
1.session的工作原理 (1)首先使用session_start()函数进行初始换 (2)当执行PHP脚本时,通过使用$_SESSION超全局变量注册session变量. (3)当PHP脚本执行 ...
- 多行滚动jQuery循环新闻列表代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP 生成随机浮点数
<?php /** * @desc 获取随机浮点数(支持最大最小值参数互换) * @date 2014-11-07 17:04:21 * * @param int|\最小浮点数 $min 最小浮 ...