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. Hadoop2.2.0安装笔记

    最近想学习hadoop,于是网上找了些教程学习,几经周折,总算安装成功了! 先讲下环境,就2台机器...都是vmware虚拟机,操作系统centos, jdk版本 1.8.0 hadoop版本 2.2 ...

  2. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  3. 为Linux集群创建新账户，并配置hadoop集群

    转自:http://blog.csdn.net/bluesky8640/article/details/6945776 之前装python.jdk.hadoop都是用的root账户,这是一个绝对的失策 ...

  4. (转)Python - 字符串对齐

    https://zhuanlan.zhihu.com/p/33923344-----------Python小知识:用format格式化输出字符串 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  5. 现代cpu的合并写技术对程序的影响

    对于现代cpu而言,性能瓶颈则是对于内存的访问.cpu的速度往往都比主存的高至少两个数量级.因此cpu都引入了L1_cache与L2_cache,更加高端的cpu还加入了L3_cache.很显然,这个 ...

  6. python3 判断大小端的一种方法

    这里用到了array.array('H', [1])来测试大小端,[1]可以转化为十六进制的0x0001,占两位,00位高位, 01位低位,通过第一位就可以判断大小端. 如果是小端,则转化为bytes ...

  7. TCP与UDP的差别以及TCP三次握手、四次挥手

    UDP: 1.UDP面向报文,无需建立连接,不可靠,数量小,高层就解决差错重传,无需拥塞控制 2.支持音频.视频传输 3.检查和检验UDP包头和数据和伪首部 4.分组开销小(头部8个字节),提供最大努 ...

  8. Spring统一异常处理

    1.为什么要用Spring的统一异常处理? 项目中无论是controller层.service层还是dao层都会有异常发生.每个过程都单独处理异常,系统的代码耦合度高,工作量大且不好统一,维护的工作量 ...

  9. Android4.0以上版本比较靠谱的获取手机屏幕分辨率的方法

    /** * 获取虚拟按键栏高度 * * @param context * @return */ public static int getNavigationBarHeight(Context con ...

  10. SourceTree跳过Atlassian账号，免登陆，跳过初始设置

    SourceTree 安装之后需要使用账号登陆以授权,并且是强制登陆. 登录过程非常漫长,并未在不FQ的情况下是不能成功的,下面记录一下跳过登录的方法. 装之后,转到用户本地文件夹下的 SourceT ...