<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的更多相关文章

  1. css3过渡动画 transition

    transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...

  2. css变换与动画详解

    举个栗子:--------元素整体居中.box{     position:absolute;top:50%;left:50%;    width:50px;    height:50px;    t ...

  3. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  4. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  5. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  6. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  7. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  8. css的过渡transition和动画animation

    过渡 过渡(transition)是CSS3中具有颠覆性的特性之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时元素添加效果.过渡动画:是从一个状态 ...

  9. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

随机推荐

  1. [poj2975]Nim_博弈论

    Nim poj-2975 题目大意:给定n堆石子,问:多少堆石子满足操作之后先手必胜. 注释:$1\le n\le 10^3$. 想法: 我们设M=sg(x1)^sg(x2)^...^sg(xn).其 ...

  2. java ee开发常用类和接口

    1.javax.Validation接口,做mvc传入数据验证用 2.javax.servlet接口 3.javax.datasource接口 4.javax.session接口 5.javax.ht ...

  3. hdu 1247 Hat’s Words（从给的单词中找hat&#39;s word 并按字典序输出）

    1.在使用mp[key]的时候它会去找键值为key的项,假设没有,他会自己主动加入一个key的项,再把value赋值为对应的初始值(value是int的话赋值为0,string的话赋值为空).所以假设 ...

  4. 1.4－动态路由协议OSPF⑥

    OSPF Network Type/网络类型     (Run Mode/运行模式) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 物理 ...

  5. 【转】linux 远程桌面工具NX

    1.在linux服务器上需要安装3个文件,下载地址为: http://www.nomachine.com/download-package.php?Prod_Id=1977 nxclient-3.4. ...

  6. Localhost 回环IP 127.0.0.1

    LocalHost 127.0.0.1是一个保留地址,用于本地软件測试以及本地进程间通信, 也叫回环IP.回环地址.回送地址(loopback address).不管什么程序,一旦使 用回环IP发送数 ...

  7. java学习笔记：文件名区分大小写

    我按照网上的教程,写了JAVA第一个程序:Hello World!,出了两个问题,都栽在 大小写 上. public class Hello { public static void main(Str ...

  8. mysql20170410练习代码+笔记

    今天的几道高级sql查询真的挺难的,感觉好像视频里讲过,当时也没有练,已经淡化了很多,sql还是要多练习啊!确实逻辑性挺强的. SELECT studentResult,studentNO FROM ...

  9. VS2010 使用TeeChart绘图控件 - 之一 - 控件和类的导入

    vs2010的用法和vc6有很大的不同,特别是在一些函数调用那里,当然.控件导入也是很不一样的 安装好控件后就可以在工程里加入teechart控件了 加入方法有如下几种: 1.添加Teechart控件 ...

  10. [HNOI2011]XOR与路径

    https://zybuluo.com/mdeditor#1094266 标签(空格分隔): 高斯消元 期望 题面 从 1 号节点开始,以相等的概率,随机选择与当前节点相关联的某条边,并沿这条边走到下 ...