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. Using Time Profiler in Instruments

    要用 release 版本来profile 概述 time profile 是使用采样的方法来统计,而不是记录每一个方法调用的起始和结束,采样间隔是 1 ms.  在上图中,main 函数被采样了 ...

  2. php内核为变量的值分配内存的几个宏

    在php5.3之前,为某变量分配内存是用宏 MAKE_STD_ZVAL; 737 #define MAKE_STD_ZVAL(zv) \ # /Zend/zend.h738 ALLOC_ZVAL(zv ...

  3. 微服务是"银弹"吗？

    前言:所谓"银弹",本意是用金属银做成的子弹:在古老的传说里它是杀死狼人的有效武器.在著作<人月神话>也有描述.微服务是当前软件界流行的名词,那么它能成为像银弹一样厉害 ...

  4. POJ 1050

    #include <stdio.h> #include <string.h> #define mt 101 int main() { int a[mt][mt]; int st ...

  5. Java虚拟机的内存组成

    查了诸多的地方看到的都是这样一句话,我也Copy过来. 按照官方的说法:"Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时创 ...

  6. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  7. 神策Loagent数据收集 windows部署的坑

    部署可以修改bin文件夹下的bat文件.. java改为javaw..无窗口运行 重新启动的时候..要保证上次运行到的日志文件要还在..或者同名文件.. 保证要比之前的文件大些..所以最好是之前的文件 ...

  8. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

  9. mysql笔记--group by,limit用法

    table: id tag status a b c d 一.group by用法 .与count 联合计数 select status,count(*) from table group by st ...

  10. 如何写一个拼写检查器-by Peter Norvig

    本文原著:Peter Norvig  中文翻译:徐宥 上个星期, 我的两个朋友 Dean 和 Bill 分别告诉我说他们对 Google 的快速高质量的拼写检查工具感到惊奇. 比如说在搜索的时候键入 ...