☀【动画】过渡 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()可以实现按比例放大或者缩小功能. ...
随机推荐
- HDU 4422 The Little Girl who Picks Mushrooms（简单题）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4422 题目大意:小姑娘背着5个包去山上采蘑菇,每座山上只能用一个背包采集.三个小精灵会要她3个背包,其 ...
- 代码静态分析工具PCLint, Splint
一.PCLint REFER: 代码静态检查工具PC-Lint运用实践 二.Splint 1.在PC-Linux上安装 ①make error undefined reference toyywrap ...
- libipq —— iptables用户空间数据包排队库
LIBIPQ(3) NAMElibipq —— iptables用户空间数据包排队库 SYNOPSIS #include <linux/netfilter.h>#include <l ...
- HTML5的离线储存
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技 ...
- C#线程总结
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...
- JavaScript中的运算符种类及其规则介绍
JavaScript中的运算符有很多,主要分为算术运算符,等同全同运算符,比较运算符,字符串运算符,逻辑运算符,赋值运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScri ...
- cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有所帮助,如果有差错的地方还请各位多多指教(本文所有程序均通过VC 6.0运行)转载请保留作者信息:1.cin1 ...
- eclipse:java.lang.OutOfMemoryError: PermGen space 最简单的解决方式
我使用的工具是STS, Eclipse同理: 打开如下界面: 左则选择项目启动使用的Tomcat-->在右侧面板Tab项中选择" Arguments":在VM argumen ...
- Linux统计某文件夹下文件、文件夹的个数
统计某文件夹下文件的个数 ls -l |grep "^-"|wc -l 统计某文件夹下目录的个数 ls -l |grep "^d"|wc -l 统计文件夹下文件 ...
- 关于ASE日志空间示数不正常的解决办法
最近某系统的ASE数据库出现了异常,经过各种努力,终于把数据库正常又起起来了.但是经过检查,发现在查看剩余日志空间的时候(sp_helpsegment 'logsegment'),发现显示出来 ...