CSS平滑过渡动画：transition
<html>
<head>
<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet">
<style>
body{
margin-top: 30px;
}
.box {
width: 400px; padding: 15px; background-color: #f0f3f9;
}
.content {
height: 0; position: relative; overflow: hidden;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
.content img {
position: absolute; bottom: 0;
}
.block{
margin: 20px 20px 20px 0;
width:100px;
height:100px;
background:blue;
transition:background 2s, width 2s;
} .block:hover{
width:300px;
background:red;
} </style>
</head>
<body>
<div class="container">
<div class="block"></div>
<a href="javascript:" class="btn btn-primary" id="button">点击展开图片</a>
<div id="more" class="content">
<img src="http://i1.hoopchina.com.cn/u/1403/26/425/2709425/3076ecc2.jpg" height="191" />
</div>
</div> <script>
(function() {
var Btn = document.getElementById("button"),
More = document.getElementById("more"); var display = false; Btn.onclick = function() {
display = !display;
More.style.height = display? "192px": "0px"
return false;
};
})();
</script>
</body>
</html>
CSS平滑过渡动画：transition的更多相关文章
- css3过渡动画 transition
transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
- css变换与动画详解
举个栗子:--------元素整体居中.box{ position:absolute;top:50%;left:50%; width:50px; height:50px; t ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- 用js触发CSS3-transition过渡动画
用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- CSS过渡动画之transition
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- css的过渡transition和动画animation
过渡 过渡(transition)是CSS3中具有颠覆性的特性之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时元素添加效果.过渡动画:是从一个状态 ...
- 【CSS】过渡、动画和变换
1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...
随机推荐
- 18、Java并发性和多线程-饥饿与公平
以下内容转自http://ifeve.com/starvation-and-fairness/: 如果一个线程因为CPU时间全部被其他线程抢走而得不到CPU运行时间,这种状态被称之为“饥饿”.而该线程 ...
- python集合可以进行相减
python集合可以进行相减 student = {'tom','jim','mary','tom','jack','rose'} print(student) print('rose' in stu ...
- Caused by: java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistrationBean
Caused by: java.lang.ClassNotFoundException: org.springframework.boot.context.embedded.FilterRegistr ...
- 国际维修联合会IMA年度大会在瑞士圆满结束
瑞士卢加诺 ☆2016年4月5日至7日 中国设备管理协会国际交流合作中心主任.学府咨询(国际)集团董事长.IMA中国分会主席李葆文教授,应邀出席了4月5日至7日在瑞士卢加诺召开的国际维修联合会年度大会 ...
- Android Studio VS Eclipse （还在用Eclipse？你OUT了！）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990).谢谢支持! 公司派来一个去美国參加完AnDevCon大会的来给我们分享大会上学习的内容. AnDevC ...
- HDU5501/BestCoder Round #59 (div.2)The Highest Mark dp+贪心
The Highest Mark 问题描述 2045年的SD省队选拔,赛制和三十年前已是完全不同.一场比赛的比赛时间有 tt 分钟,有 nn 道题目. 第 ii 道题目的初始分值为 A_i(A_i \ ...
- 百度MP3+图片+文字：生成结果文件；（声音58秒，视频59秒，同步性需要进一步优化）
import os os_sep = os.sep this_file_abspath = os.path.abspath(__file__) this_file_dirname, this_file ...
- 重启标志log
01) fatal error : 如下: [ >.()[:swapper/][name:disp_lcm&][DISP]disp_lcm_probe [ >.()[:swappe ...
- 【POJ 2259】 Team Queue
[题目链接] http://poj.org/problem?id=2259 [算法] 由题,一个人入队时,若这个人所在的组已经有人在队列中,则加入队列,否则排到队末 因此我们发现,这个队列一定是由连续 ...
- HTTP协议下可拖动时间轴播放FLV的实现（伪流媒体）
HTTP协议下实现FLV的播放其实并不复杂,当初实现的原理是使用了flowPlayer插件实现的,效果还不错.但仍有两大问题影响着客户的访问情绪: 1.预加载时页面卡死,似乎没有边下边播. 2.偶尔边 ...