之前写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. [Ms SQL] 基本創建、修改與刪除

    ##創建 table student, 內涵 id ,name ,tel三種columne,設定id為primary key create table student ( id int primary ...

  2. centos7镜像文件

    1.打开网址https://www.centos.org/download/2.点击Minimall ISO 按钮  3.选择aliyun地址 4.centos版本介绍 在CentOS官方网站上,Ce ...

  3. Btrace介绍

    一.Btrace简介 BTrace可以动态的向目标应用程序的字节码注入追踪代码 用到的技术JavaComplierApi,JVMTI,Agent,Instrumentation+ASM 二.Btrac ...

  4. 记录一个源码安装mysql5.6的方法

    https://www.jb51.net/article/118853.htm 如果之前源码安装过mysql5.6的话,卸载方法如下:rm -rf /var/lib/mysql/rm -rf /usr ...

  5. delphi 调用QQ邮箱发送邮件

    procedure TForm1.FormCreate(Sender: TObject); begin try IdSMTP1.AuthenticationType := atLogin; IdSMT ...

  6. 工控随笔_04_西门子_解决Step 7软件因授权问题不能打开的方式和方法

    西门子的软件是授权软件,只有经过授权认证的用户才能使用,如果没有通过授权认证则不能 正常的使用软件的相关功能. 一.西门子授权不成功问题 如上图所示报故障代码: 000001-0505.报警文本为:未 ...

  7. 20164310Exp2后门原理与实践

    一.基础问题回答 1.例举你能想到的一个后门进入到你系统中的可能方式 答:在莫名其妙的网站下载某些莫名奇妙的播放器. 2.例举你知道的后门如何启动起来(win及linux)的方式? 答:对于windo ...

  8. 7.7 wordcnt.c 程序

    wordcnt.c 程序 #include <stdio.h> #include <ctype.h> // 为isspace() 函数提供原型 #include <std ...

  9. 从9x9矩阵中抽取中间菱形区域打印 - perl

    起因: 源自于c的练习题,打印diamond,因为perl不需编译,方便调试,故先用perl实现一下 关键: 没有想到好的思路,只能借助于上一篇打印上下三角矩阵的方法,把菱形拆成上下左右4个三角矩阵区 ...

  10. html的换行代码<br/>介绍和写法

    在网页中,我们要对文字进行换行,就需要使用到<br/>标签,写法如下 换行:<br/> <br/>属于一个单独标签,仅需要将需要换行的文字后方加入此标签即可实现换行 ...