☀【动画】过渡 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()可以实现按比例放大或者缩小功能. ...
随机推荐
- mybatis学习（一）一个在idea下的实例
今天总结的是mybatis,首先说mybatis是什么? MyBatis 是一个简化和实现了 Java 数据持久化层(persistence layer)的开源框架,它抽象了大量的 JDBC 冗余代 ...
- Hdu 1042 N! (高精度数)
Problem Description Givenan integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input OneN in one ...
- C++ 代码性能优化 -- 循环分割提高并行性
对于一个可结合和可交换的合并操作来说,比如整数的加法或乘法, 我们可以通过将一组合并操作分割成 2 个或更多的部分,并在最后合并结果来提高性能. 原理: 普通代码只能利用 CPU 的一个寄存器,分割后 ...
- Poj 1054 The Troublesome Frog / OpenJudge 2812 恼人的青蛙
1.链接地址: http://poj.org/problem?id=1054 http://bailian.openjudge.cn/practice/2812 2.题目: 总时间限制: 10000m ...
- os.walk获取同级目录具有随机性
1.在不同机器上,相同内容的目录和文件,os.walk获取结果中路径的先后顺序具有随机性. 2.查看os.walk源码得知,listdir具有随机性. 3.修改该源码,对listdir结果排序后,使得 ...
- yii2 model常用验证规则
//字段必填[['username'],'required','message'=>'{attribute}不能为空!'][['username','password'], 'required' ...
- 修改centos环境变量
1.vim /etc/profile 2.PATH=$PATH:/usr/local/php/bin;export PATH 3.source /etc/profile
- UDP TCP应用场景
作者:陈硕链接:https://www.zhihu.com/question/20060141/answer/26735814来源:知乎著作权归作者所有,转载请联系作者获得授权. UDP 的使用范围很 ...
- iOS多工程依赖
导入准备工作 1.建立一个Framework & Library->Cocoa Touch Static Library 取名A,并在A里新建一个类用来测试 2.建立一个demo工程B ...
- navigationController Pop回指定页面
[self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIn ...