之前写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. 如何实现从Java入门到服务端项目开发的进阶?

    对于打算入门或者刚刚入门学习Java的人来说,刚开始接触这门学科,往往会觉得不知所措,也会觉得很迷茫.结合前人经验,就从入门到进阶对于Java的学习而言,应该对于学习时间.目标和内容规划有一个清晰的定 ...

  2. Hadoop MapReduce2.0（Yarn）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/cqboy1991/article/details/25056283 MapReduce2.0(Yar ...

  3. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  4. 关于mysql自增主键

    对于mysql表(其他数据库没测试过) 如果定义了自增主键,并且手动设置了主键的值,那么当再次自增创建数据的时候,回在设置的主键值的基础上进行自增. 如(id是主键): 起始插入(3,1),而后手动插 ...

  5. Day11 expandtabs 制表

  6. Internet Explorer 安全区域注册表项说明

    引用网址:http://support.microsoft.com/kb/182569/zh-cnInternet Explorer 安全区域设置存储在以下注册表子项下面: HKEY_LOCAL_MA ...

  7. bzoj5108: [CodePlus2017]可做题

    Description qmqmqm希望给sublinekelzrip出一道可做题.于是他想到了这么一道题目:给一个长度为n的非负整数序列ai,你需 要计算其异或前缀和bi,满足条件b1=a1,bi= ...

  8. 前端-JavaScript1-8——JavaScript之作业练习

    1.表示气温有两种方法:摄氏度和华氏度.两者的关系是: 编写程序,让用户输入摄氏度,弹出对应的华氏温度. //第一步,让用户输入数字 var sheshidu = parseFloat(prompt( ...

  9. python 多线程threading的学习一

    1. import threading #引入线程模块 2 申明实例 t = threading.Thread(target  = fun, args = (,)) 说明:参数target 是要运行的 ...

  10. Json序列化自定义属性名称

    using Newtonsoft.Json; [JsonProperty("userName")] public string UserName { get; set; }