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. mysql 练习 和链接 pymysql 练习题

    python操作数据库 1. 查询student表的所有记录 2. 查询student表的第2条到第4条记录 3. 查询所有学生的学号(id).姓名(name)和报读课程(department)的信息 ...

  2. D08——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D08 20180829内容纲要: socket网络编程 1  socket基础概念 2  socketserver 3  socket实现简单的SSH服务器端和 ...

  3. eclipse 使用prolog编程

    第一步:在电脑上安装swi-prolog 相应环境下载地址http://www.swi-prolog.org/download/stable 第二步: eclipse-help-install new ...

  4. jq03--基础函数

    我们继续学习jq的一些函数,包括向jq对象添加.删除CSS属性以及遍历DOM树. 1.获取.设置CSS类 addClass()--向被选元素添加1个或多个类属性 .importance{font-we ...

  5. c#调用R

    R.NET使用文档 介绍 本页面涉及R.NET1.5.13. 1.5.13版本在功能上等同于1.5.12,但可作为一个包在NuGet.org上获得. R.NET使.NET框架与R统计语言在同一进程进行 ...

  6. 详解Python中的join()函数的用法

    函数:string.join() Python中有join()和os.path.join()两个函数,具体作用如下:     join():    连接字符串数组.将字符串.元组.列表中的元素以指定的 ...

  7. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  8. java泛型---通配符,泛型嵌套

    package generic; import java.util.ArrayList; import java.util.List; /** * ? -->通配符,类型不确定,用于声明 变量| ...

  9. Linux的shell script

    Linux的shell script //编辑shell: vi a.sh //子进程运行shell sh a.sh //主线程运行shell source a.sh 相关例子: #!/bin/bas ...

  10. CentOS7 yum方式安装 MongoDB 3.4 复制集

    CentOS7 yum方式安装 MongoDB 3.4 环境.准备 Centos7 系统 配置MongoDB的yum源,添加文件/etc/yum.repos.d/mongodb-org-3.4.rep ...