3D     http://fangyexu.com/tool-CSS3Inspector.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .box {

            width: 100px;

            height: 100px;

            background-color: #F00;

            /*transition-property: all;

            transition-duration: 4s;

            transition-timing-function: ease;

            transition-delay: 2s;*/

            transition:bacground 4s linear 2s,

                        width 2s ease-in 1s;

            color: #FFF;

        }

        .father:hover .box {

            margin-left: 500px;

        }

        .linear {

            transition-timing-function: linear;

        }

        .ease {

            transition-timing-function: ease;

        }

        .ease-in {

            transition-timing-function: ease-in;

        }

        .ease-out {

            transition-timing-function: ease-out;

        }

        .ease-in-out {

            transition-timing-function: ease-in-out;

        }

        .cubic-bezier {

            transition-timing-function: cubic-bezier(0.9, 1.26, 0.11, -0.9);

        }

    </style>

</head>

<body>

<div class="father">

    <div class="box linear">linear</div>

    <div class="box ease">ease</div>

    <div class="box ease-in">ease-in</div>

    <div class="box ease-out">ease-out</div>

    <div class="box ease-in-out">ease-in-out</div>

    <div class="box cubic-bezier">cubic-bezier</div>

</div>

</body>

</html>

css过渡笔记的更多相关文章

  1. Head First HTML与CSS阅读笔记（二）

    上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...

  2. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  5. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  6. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  7. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  8. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  9. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

随机推荐

  1. vue-cli新建vue项目安装axios后在IE下报错

    使用脚手架新建了一个vue项目,可以在IE9+浏览器运行,但是在添加了axios后,在IE下就报错了 首先是安装axios,在命令行执行: $ npm install axios -s //执行命令, ...

  2. 【NOIP2017】逛公园 最短路+DP

    诶,去年场上不会处理$0$的环,只拿了$60$有点可惜. 我们先不管边边权为$0$的边. 我们先跑一次最短路,令$dis[u]$表示从$1$至$u$的最短路的长度. 那么根据题目的要求,从起点走到$u ...

  3. QuantLib 金融计算——修复 BatesProcess 中的两个 Bug

    QuantLib 金融计算--修复 BatesProcess 中的两个 Bug 我发现了 BatesProcess 中的两个 Bug: 基类 HestonProcess::factors 的返回值取决 ...

  4. Seqlist L 与 Seqlist *L的区别

     Seqlist L结构体变量,SeqlistInsert之后不可以带回新的插入数据.  Seqlist *L 是传结构体指针 用SeqlistInsert之后可以有新的插入.

  5. An assembly specified in the application dependencies manifest

    .Net Core 运行的时候报错 An assembly specified in the application dependencies manifest (xxx.deps.json) was ...

  6. spring boot和mybatis集成分页插件

    MyBatis提供了拦截器接口,我们可以实现自己的拦截器,将其作为一个plugin装入到SqlSessionFactory中. 首先要说的是,Spring在依赖注入bean的时候,会把所有实现MyBa ...

  7. Javac语法糖之EnumSwitch

    在Switch中可以使用的类型有枚举.字符串类型与整形int类型,下面来具体看这几个类型. 1.switch为枚举类型 枚举类: enum Fruit { APPLE,ORINGE } 调用javac ...

  8. 常用CSS实例

    为表格设置合并边框模型: border-collapse:collapse 规定单元格之间的空间: cellspacing:0 规定内侧边框的哪个部分是可见的: rules:all

  9. Web自动化 - 选择操作元素 2

    文章转自 白月黑羽教Python 前面我们看到了根据 id.class属性.tag名 选择元素. 如果我们要选择的 元素 没有id.class 属性, 这时候我们通常可以通过 CSS selector ...

  10. Android-NDK处理用户交互事件

    在 android_main(struct android_app* state)函数里面设置输入事件处理函数:state->onInputEvent = &handleInput;// ...