<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transtition</title>

    <style>

        .zero{

            height:100px;

            width:100px;

            background-color:white;

            transition: background-color 0.5s ease-in 0s;

            float:left;

            margin-left:10px;

        }

        .zero:hover{

            background-color:gray;

        }

    </style>

</head>

<body>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

    <div class='zero'></div>

</body>

</html>

这时比较简单的过度可以实现一些简单的类似动画的效果，实现过渡一定要具备四个要素：

1.指定过渡属性，如background、color等
2.指定过渡所需时间
3.指定过渡函数，即过渡的速度、方式等
4.指定过渡延迟时间，表示开始执行的时间

这样就可以实现过渡由于是符合元素可以直接这样写transition: <property> <duration> <timing-function> <delay>。

transition过度的更多相关文章

  1. CSS3 transition 过度

    一个元素在不同的状态之间进行平滑的交换 CSS3中使用transition属性实现过度效果 一个简单的例子: img{ background-image:url("img/1.jpg&quo ...

  2. transition过度效果 + transform旋转360度

    css样式: .animate{ width:65px; height:40px; background:#92B901; color:#ffffff; position:absolute; font ...

  3. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  4. CSS3详解：transform、transition

    CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  5. css—动画（transform, transition, animation）

    transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...

  6. Css3炫酷总结使用

    先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...

  7. css3快速复习

    选择器边框.阴影 border-radius: 50%; 设置正圆形背景的改变CSS3重要的新东西: ● transition 过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均 ...

  8. HTML——CSS的基础语法2

    一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...

  9. 半个月学习的it内容

    1  基本头部标签: 1 head: HEAD里面主要放一些有关网页设置的相关语句-->2编码格式: 设置网页的字符集编码格式:GB2312,简体中文的编码格式 GBK:扩展的国标码,比国标码多 ...

随机推荐

  1. P1035

    P1035 时间限制: 1 Sec  内存限制: 128 MB提交: 87  解决: 36[提交][状态][讨论版] 题目描述 给出一张n*n(n< =100)的国际象棋棋盘,其中被删除了一些点 ...

  2. Django的form表单之文件上传

    在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...

  3. 初学者易上手的SSH-struts2 01环境搭建

    首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框 ...

  4. DNS—正、反向解析；委派；主从；子域；转发；智能dns等的实现

    前言:DNS,耳熟能详的东西,内容太多,小编也不太好讲清,只能写几个实验详解,供大家参考. 一.简单介绍 1.DNS:通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析). 端 ...

  5. c#(asp.net) 多线程示例，用于同时处理多个任务

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  6. WebApi实现自定义错误日志

    一.Mvc错误处理默认有添加HandleErrorAttribute默认的过滤器,但是我们有可能要捕捉这个错误并记录系统日志那么这个过滤器就不够用了,所以我们要自定义Mvc及Web Api各自的错误处 ...

  7. WPF DataGrid绑定一个组合列

    WPF DataGrid绑定一个组合列 前台: <Page.Resources>        <local:InfoConverter x:Key="converter& ...

  8. jQuery和AngularJS的区别

    这篇文章主要介绍了jQuery和AngularJS的区别浅析,本文着重讲解一个熟悉jQuery开的程序员如何应对AngularJS中的一些编程思想的转变,需要的朋友可以参考下   最近一直在研究ang ...

  9. 对象反序列化时,抛出java.io.StreamCorruptedException: invalid type code: AC异常

    问题描述:在使用java.io.ObjectInputStream类的readObject()方法去读取包含有序列化了多个(两个及两个以上)类的文件时,当读取到第二个类时,会抛出题目中提到的异常. 原 ...

  10. python中sys.exit()和os._exit(0)退出程序

    python中退出程序的两种方法,0为默认状态,可以为空,两者均会退出当前运行的程序,os._exit(0)中的0不能省略 sys.exit(0):可以捕获SystemExit异常,然后做相应的清理工 ...