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. day 65 crm(2) admin源码解析,以及简单的仿造admin组件

    前情提要: crm中的admin组件重写. 一:admin的autodiscover 作用:实现扫面该项目中的所有的admin 1:执行顺序-> 按照注册的顺序执行 二:单例模式 1:普通案例的 ...

  2. 转的很好的js 入门

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  3. iOS-AFNetworking参数和多文件同时上传【多文件上传】

    1. 前言 在项目开发中,我们经常需要上传文件,例如:上传图片,上传各种文件,而有时也需要将参数和多个文件一起上传,不知道大家的项目中遇到了没有,我在最近的项目中,就需要这样的一个功能:同时上传参数. ...

  4. 【10】JMicro微服务-API网关

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到9小节 1. Api网关基本特性: Api网关作为对外网提供服务的基本入口,地位类似于NGINX, ...

  5. EJB3 jpa 数据库表的映射关系

    1)多对一映射关系(单向) 使用外键关联,在外键的选取上以多的一方为主,即外键要在多的一方体现出来 @Entity public class Company implements Serializab ...

  6. WordPress上传文件类型限制解决办法

    文件类型不符合安全规则.试试别的文件. 这种错误是由于WordPress中做了文件上传格式的限制,这种限制可以在WordPress中的wp-include/functions.php的get_allo ...

  7. Eclipse Git 克隆项目的时候出现Internal error; consult Eclipse error log

    在使用git下载代码时偶尔会遇到  Internal error; consult Eclipse error log 这个报错. 简述下个人解决思路: Eclipse 错误日志报错为:org.ecl ...

  8. BiLSTM+CRF 实体识别

    https://www.cnblogs.com/Determined22/p/7238342.html 这篇博客 里面这个公式表示抽象的含义,表示的是最后的分数由他们影响,不是直观意义上的相加. 为什 ...

  9. Mongodb添加副本及修改优先级

    Mongodb添加副本及修改优先级 1.添加副本集 #在primary节点上执行 >rs.add( { host: "192.168.1.11:27017", priorit ...

  10. 【起】ACM类下为过往所做过的部分算法题目

    [起]ACM类下为过往所做过的部分算法题目 几百道题,日后细细品味.