<!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. 1007 正整数分组 1010 只包含因子2 3 5的数 1014 X^2 Mod P 1024 矩阵中不重复的元素 1031 骨牌覆盖

    1007 正整数分组 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.   Input 第1行:一个 ...

  2. 屏蔽掉Google Chrome 浏览器 textarea 单词拼写检测

    可以使用html5的spellcheck属性来关闭对元素内容进行拼写检查. <!-以下两种书写方法正确--> <textarea spellcheck="true" ...

  3. OC中成员属性 成员变量

    比如用property声明一个变量属性 然后我们会为它用懒加载的方式重写get方法 然后我们在使用这个变量的时候,都是用self.itemArray,为什么这样用比较好呢,这是因为self.是对属性的 ...

  4. ZOJ2975 伪数组压缩+组合数

    Kinds of Fuwas Time Limit: 2 Seconds      Memory Limit:65536 KB In the year 2008, the 29th Olympic G ...

  5. Collection和Map的默认扩容参数

    初始大小:调用无参构造函数时默认的容量 加载因子:超过 (当前容量*加载因子) 时会进行扩容 扩容因子:扩容时增加的容量为 (当前容量*扩容因子)        容器         初始容量    ...

  6. 【node】使用nvm管理node版本

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你想快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来安 ...

  7. C# 动态加载卸载 DLL

    我最近做的软件,需要检测dll或exe是否混淆,需要反射获得类名,这时发现,C#可以加载DLL,但不能卸载DLL.于是在网上找到一个方法,可以动态加载DLL,不使用时可以卸载. 我在写一个WPF 程序 ...

  8. 下载MySQL历史版本

    下载MySQL历史版本 地址:http://downloads.mysql.com/archives/community/

  9. 虚拟专用网VPN

    1. 三个专用地址块: (1)10.0.0.0到10.255.255.255 (2)172.16.0.0到172.31.255.255 (3)192.168.0.0到192.168.255.255 2 ...

  10. 【机器学习】支持向量机（SVM）

    感谢中国人民大学胡鹤老师,课程深入浅出,非常好 关于SVM 可以做线性分类.非线性分类.线性回归等,相比逻辑回归.线性回归.决策树等模型(非神经网络)功效最好 传统线性分类:选出两堆数据的质心,并做中 ...