之前写css的效果，都是使用js 来完成的，但是写js比较耗费时间，有时候逻辑不对，还出不来效果，所以也比较烦；所以一些简单的效果，就使用css 来完成会比较好一些，不必耗费太多的精力；

但是写css 时，也需要明白到底为什么会这样变化，这样我们才能对写出来的代码有一个比较好的理解。很遗憾，先前写代码的时候，虽然也使用了css,但是为什么会这样写，完全是蒙的，因为看到别人这样写过，所以也这样写，一直没有好好的研究一下，如果需求稍微换一下，即使是很微小的变化，就不知道怎么写了。还停留在一个鹦鹉学舌的阶段；这几天看了一个视屏，大概了解了一些关于css 过渡效果的规则，也自己总结一下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         .nei {

             width: 200px;

             height: 100px;

             background: red;

             margin: 200px auto;

             transition-property: width;

             transition-duration: 3s;

         }

         .nei:hover {

             width: 400px;

         }

     </style>

 </head>

 <body>

     <div class="abox">

         <div class="nei"></div>

     </div>

 </body>

 </html>

运行结果：鼠标放到div.nei 上，这宽度自动缓慢变为400px;这就达到了使用js达到的效果，只用3 行css代码就搞定了

在 js中，可以一次性使用json 的格式设置多个属性的效果，在css 中，也是可以的，下面同时设置高宽和背景的效果如下；

   .nei {

             width: 200px;

             height: 100px;

             background: red;

             margin: 200px auto;

             transition-property: width, height, background-color;

             transition-duration: 2s, 2s, 2s;

         }

         .nei:hover {

             width: 400px;

             height: 200px;

             background-color: green;

         }

运行结果：可以同时设置多个属性的变化值

上面提到的过渡效果的属性，有两个：一个是transition-porperty,一个是transition-duration,分别代表属性的名称和属性的过渡时间；

关于过渡效果，还有另外两个属性，一个是transion-timing-fuction,一个是transition-delay，分别代表属性的过渡效果和延时时间：

所谓过渡效果，指的是 当过渡发生时，从最初始的时候到最终的时候，经历的过程；一般来说有 5 种效果：分别是 linear,easy,easy-in,easy-out,easy-in-out

大部分情况下我们只用到linear,因为默认就是这个值

下面增加了delay属性和timing-function属性：

  .nei {

             width: 200px;

             height: 100px;

             background: red;

             margin: 200px auto;

             transition-property: width, height, background-color;

             transition-duration: 2s, 2s, 2s;

             transition-delay: 2s;

             transition-timing-function: linear;

         }

         .nei:hover {

             width: 400px;

             height: 200px;

             background-color: green;

         }

效果：延迟2s 执行过渡

对于过渡，我们有一种简写模式：运行结果是一样的

 .nei {

             width: 200px;

             height: 100px;

             background: red;

             margin: 200px auto;

             transition: width 2s linear 2s, height 2s linear 2s, background-color 2s linear 2s

         }

         .nei:hover {

             width: 400px;

             height: 200px;

             background-color: green;

         }

另外：当所有的属性变化过程相同的时候，可以简写如下：

  .nei {

             width: 200px;

             height: 100px;

             background: red;

             margin: 200px auto;

             /* 简写如下 */

             transition: all 2s;

         }

         .nei:hover {

             width: 400px;

             height: 200px;

             background-color: green;

         }

这里 all 代表所有属性，2s 表示过渡时间，而后两个参数，则是可以省略不写的

小结：一个过渡，只要满足3三条件，就可以实现过渡效果：1.是有过渡的属性，2是过渡的属性有变化，3是有过渡的时间

只要满足这三个要素，就可以实现过渡效果

css 之过渡效果的更多相关文章

  1. CSS 3 过渡效果之jquery 的fadeIn ,fadeOut

    .div { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.5s,opacity 0.5s linear; } ...

  2. 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  3. css过渡效果和盒子缩放大小的结合

    给盒子一个鼠标经过时放大里面的图片效果在css中使用过渡效果transition结合 <html lang="en"> <head> <meta ch ...

  4. javascript高级程序设计---CSS操作

    CSS与JavaScript是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动.但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合. HTML元素的style属性 ...

  5. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  6. 前端开发必备 40款优秀CSS代码编写工具推荐

    摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...

  7. 初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  8. JqueryMobile入门基础附源码下载

    最近要做一个手机版的网站,所以就了解了一点JqueryMObile,下面是我整理的笔记,现在分享给大家,希望朋友们喜欢,先给个首页看看吧!!! 一.JqueryMobile基本页面结构 <!DO ...

  9. 开发者必读jQuery Mobile入门教程

    你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机.android,黑莓还是iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总结了一个智能手机系统/设备的列 ...

随机推荐

  1. C++ 自定义时间

      今天精神状态不好,和公司的领导请了假.为了抵抗我的痛苦,我在床上打坐冥想,从早上九点到下午三点二十六.嗯,感觉好多了.这种温和的暴力果然有效.   之后吃了点东西,然后无聊的我就在想,明天的工作该 ...

  2. 19.3 Table 1-2.S3C2440A 289-Pin FBGA Pin Assignments (Sheet 4 of 9) (Continued)

    应该为GPA22,这个在中文翻译手册里是正确的.

  3. Linux基础入门-文件打包与解压缩

    文件打包与解压缩: Windows上常见的压缩文件后缀有*.zip(zip程序打包压缩), *.rar(rar程序压缩), *.7z(7zip程序压缩),在Linux上常见的还有*.gz(gzip程序 ...

  4. html5/h5课件如何制作？

    随着flash逐渐被html5取代,很多教育机构都在面临着如何将自己的flash交互课件产品转换到html5版本的问题,最近遇到非常多的客户一上来就问我,flash课件能直接转成Html5课件么?答案 ...

  5. 由consequence忽然发现英语也挺有意思

    con- 是拉丁语前缀, 有 with, together 的意思. con- 和 com- 一样的. 只是因为 在 b p m 前发 m 音更方便, 所以这些音前的 con- 变为 com- (例 ...

  6. 软件测试：3.Exercise Section 2.3

    软件测试:3.Exercise Section 2.3 /************************************************************ * Finds an ...

  7. OO第三次博客

    规格化设计的发展历史 在计算机的早期发展中,软件开发没有可以遵循的系统方法,往往只有源代码而没有软件说明书等文档,因此这段时期的软件通用性时很有限的.后来到了20世纪60年代,软件开始被广泛使用,软件 ...

  8. PHP URL安全的Base64位编码

    先将内容编码成Base64结果; 将结果中的加号”+”替换成中划线“-“; 将结果中的斜杠”/”替换成下划线”_”; 将结果中尾部的“=”号全部保留; 实现 编码 function urlsafe_b ...

  9. samba、ftp和ssh服务

    samba服务 Smb主要作为网络通信协议; Smb是基于cs架构: 完成Linux与windows之间的共享:linux与linux之间共享用NFS 第一步:安装samba [root@ken ~] ...

  10. Android中的透明度

    最近在实践中,在一个设置了背景图的LinearLayout中放一个透明度15%,背景色为#ffffff的容器,里面再放白色#ffffff的文本,开始容器用background="#fffff ...