<!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. hdu1760博弈SG

    A New Tetris Game Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. Html事件冒泡

    原以为span不同于input,事件冒泡会被父级标签吞噬,写了个测试事件冒泡的Demo,发现并不是想得那样.另外:event.stopPropagation()以及event.stopImmediat ...

  3. C#设计模式之七适配器模式（Adapter）【结构型】

    一.引言   从今天开始我们开始讲[结构型]设计模式,[结构型]设计模式有如下几种:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式.[创建型]的设计模式解决的是对象创建的问题, ...

  4. SqlServer和Oracle中一些常用的sql语句5 流程控制语句

    --在sql语句中 begin...end 用来设定一个程序块 相关于c#中的{} declare @yz real,@w int --声明变量 set @w=120 --为变量赋值 if @w< ...

  5. Linux基础命令讲解（二）

    Linux命令基本格式: 命令 [参数] [路径文件] 方括号内容可省略 查看命令帮助手段: 1 man 命令名 (man 还可以获取配置文件,函数的帮助) 2 命令 --help 3 help 命令 ...

  6. cocos2dx - 创建地图及玩家(伪)

    接上一节内容:cocos2dx - 环境配置,项目创建 本节主要描述cocos中精灵的创建及点击事件的使用 打开创建好的test项目,看到下图的目录结构,真正的游戏逻辑路径在src下. AppDele ...

  7. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  8. Python格式化字符串--format

    format格式化字符串方法相较于老版%格式方法的优点: 1.不需要理会数据类型的问题,在%方法中'%s'只能替代字符串类型. 2.单个参数可以多次输出,参数顺序可以不相同. 3.填充方式十分灵活,对 ...

  9. scanf和gets的差别

    scanf("%s", str1); scanf() 读取到空格时就认为字符串输入结束了,不会继续读取了. 第一个 scanf() 读取到 "Java" 后遇到 ...

  10. spring中WebApplicationContextUtils类说明

    WebApplicationContextUtils是一个抽象类,其提供了一个很便利的方法来获取spring应用的上下文即WebApplicationContext. 其中的静态方法getWebApp ...