之前写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. Vue字符串传入变量

  2. C 语言经典例子

    1. 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #inc ...

  3. Linux col命令详解

    Linux col命令 Linux col命令用于过滤控制字符. 在许多UNIX说明文件里,都有RLF控制字符.当我们运用shell特殊字符">"和">> ...

  4. linux系统服务详解

    下面现介绍一下运行次序和运行级别: 一个 Linux 系统的引导过程可以分为几个阶段.我们主要看看当内核加载后的那一个阶段.你可以运行runlevel 命令来确定您的系统当前的运行级,当内核被加载并开 ...

  5. C语言堆栈入门——堆和栈的区别（转）

    一.预备知识—程序的内存分配    一个由C/C++编译的程序占用的内存分为以下几个部分    1.栈区(stack)—   由编译器自动分配释放   ,存放函数的参数值,局部变量的值等.其    操 ...

  6. mysql 8.0 主从复制的优化

    mysql 8.0复制改进一简介: 基于GTID下的并行复制,本文不考虑MGR架构二 主要特性   1 基于writeset的下的改进型并行复制     我在之前的一篇文章关于并行复制中详细的介绍了关 ...

  7. Dijkstra求最短路径&例题

    讲了半天好像也许maybe听懂了一点,先写下来233 先整理整理怎么存(开始绕) 最简单的是邻接矩阵存,但是开到10000*10000就MLE了,所以我们用链式前向星存(据说是叫这个名字吧) 这是个什 ...

  8. [转]Windows 经验集

    Windows Server 2012 R2 显示 这台电脑 图标方法: 来自:https://jingyan.baidu.com/article/f25ef2544f6883482c1b82e5.h ...

  9. Linux 学习目录

    1 VIM 快捷键

  10. python之路——18

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 有需要<正则指引>这本书的可以联系我,仅供学习交流使用 复习 1.递归函数,必须有结束条件2.返 ...