<!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. Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  2. postman - 基本操作

    设置环境 collections 导入 runner 导入 api 配置api 编写测试(请求和响应)脚本 api的保存和导出 setting file -- setting

  3. 小程序的get和post请求头的区别

    小程序在使用wx.request()接口 时 header 请求头默认是这样的 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' ...

  4. 消息队列、OSS常用操作封装

    public class MessageQueue { #region Private Properties private const string _accessKeyId = "&qu ...

  5. Opencv处理鼠标事件-OpenCV步步精深

    在图片上双击过的位置绘制一个 圆圈 鼠标事件就是和鼠标有关的,比如左键按下,左键松开,右键按下,右键松开,双击右键等等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标.我们通过以下函数来调用查看所 ...

  6. checkValidity-表达验证方法。

    调用该方法,可以显示对表单元素进行有效验证,返回值是boolean. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...

  7. asp.net mvc webapi 实用的接口加密方法

    在很多项目中,因为webapi是对外开放的,这个时候,我们就要得考虑接口交换数据的安全性. 安全机制也比较多,如andriod与webapi 交换数据的时候,可以走双向证书方法,但是开发成本比较大, ...

  8. 不使用数据结构反转栈 递归 CVTE实习 CVTE是一家什么公司

    本文因为垃圾csdn标题字限制,标题写不好.本文想说一个算法,和我在CVTE的实习,我看到CVTE是一家什么公司.如果想要喷我的,可以留言,我不会理.如果想喷公司,可以在博客评论或发到我邮件linde ...

  9. json生成方式

    <script type="text/javascript"> //初始化需要json化的参数 var data = { No: No, Type: Type }; / ...

  10. setjmp和longjmp用法

    本文转自:http://blog.csdn.net/wuhong40/article/details/6155838,感谢原文作者. 前不久在阅读Quake3源代码的时候,看到一个陌生的函数:setj ...