之前写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. CentOS6/7快捷使用gcc5

    Centos6/7自带的gcc为4.x版本,可通过devtoolset工具集安装gcc5.x版本 1. 添加yum源 1)CentOS6 [hhorak-devtoolset--rebuild-boo ...

  2. [JAVA]字节流拷贝文件

    import java.io.*; public class CopyFile { public static void main(String[] args) { //1.创建源 File in = ...

  3. Hadoop 2.x 版本的单机模式安装

    Hadoop 2.x 版本比起之前的版本在Hadoop和MapReduce上做了许多变化,主要的变化之一,是JobTracker被ResourceManager和ApplicationManager所 ...

  4. Spring boot 线上部署

    1.修改Spring Boot 1.添加:spring-boot-maven-plugin 插件 <build> <plugins> <plugin> <gr ...

  5. 浏览器端使用javascript调用腾讯翻译api

    最近在学习的小玩意,发现腾讯的文档十分坑爹,里面有很多错误的指示. 不过腾讯的机器翻译还是很牛的,我觉得翻译水准比谷歌好很多. 腾讯的机器翻译貌似在试用阶段,不收费,用QQ或微信登录即可申请使用. 首 ...

  6. Win10系统下Anaconda下安装多种Python函数库

    建议直接安装Anaconda,这是一个包含Numpy,Pandas,Sklearn等函数库的计算机科学软件包,下面的软件可以在此环境下进行安装下载. 一.计算机视觉 1. OpenCV图像处理 在ht ...

  7. C++标准模板类库（STL）之queue初步

    1,STL里有些什么? 包括三个内容:容器.迭代器.算法. 2,容器有哪些? 有stack, vector, queue, deque, list, set, multiset, map, multi ...

  8. mysql 存储过程的实现原理

    一.描述 存储过程是一组可以完成特定功能的SQL语句集,经编译后存储在数据库中 statement语句(DDL.DML.导出及管理语句等).异常处理.流程控制二.创建存储过程 系统做语句分析,如果没有 ...

  9. DApp demo之pet-shop

    注意: 这里使用的truffle版本为4.1.4,貌似使用高版本在truffle test时候会出问题,提示 truffle/Assert.sol is not found等错误 使用Truffle ...

  10. Spring boot加载REACTIVE源码分析

    一,加载REACTIVE相关自动配置 spring boot通过判断含org.springframework.web.reactive.DispatcherHandler字节文件就确定程序类型是REA ...