代码：

<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<meta charset="utf-8">
<style type="text/css">
.BK{width: 800px;height: 60px;border:1px solid black;margin: 400px;}
.BK div{width: 50px;height: 50px; border:1px solid black;float: left;margin: 5px;transition: all 1s;}
.BK div:hover{box-shadow: 10px 10px 20px red;}
.BK div:nth-child(1):hover{ background-color: #888888; }
.BK div:nth-child(2):hover{ background-color: #FF0088;}
.BK div:nth-child(3):hover{ background-color: #FF0000;}
.BK div:nth-child(4):hover{ background-color: #FF5511;}
.BK div:nth-child(5):hover{ background-color: #FF8800;}
.BK div:nth-child(6):hover{ background-color: #FFBB00;}
.BK div:nth-child(7):hover{ background-color: #00FF00;}
.BK div:nth-child(8):hover{ background-color: #00FFFF;}
.BK div:nth-child(8):hover{ background-color: #7700FF;}
.BK div:nth-child(8):hover{ background-color: #CC00FF;}
.BK div:nth-child(9):hover{ background-color: #0000FF;}
.BK div:nth-child(10):hover{ background-color: #9999FF;}
.BK div:nth-child(11):hover{ background-color: #007799;}
.BK div:nth-child(12):hover{ background-color: #990099 ;}
</style>
</head>
<body>
<div class="BK">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

CSS之transition过渡练习的更多相关文章

  1. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  2. CSS transition 过渡 详解

    transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 ...

  3. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  4. CSS之transition（动画）

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...

  5. css笔记 - transition学习笔记(二)

    开始把7,8月份学的css整理一下 transition过渡 1. CSS transition transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果. 2. tran ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 transition过渡

    CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...

  7. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  8. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  9. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

随机推荐

  1. php使用PDO连接mysql数据库

    <?php $dsn='mysql:host=localhost;dbname=mssc'; $user='root'; $password=''; $status=1; try { $sql= ...

  2. 后台接收URL地址的参数

    其实很简单,只是写一下加强记忆 后台接收URL传递过来的参数有两种方法: 第一种用request接收 HttpServletRequest request = ServletActionContext ...

  3. Surface与SurfaceView、SurfaceHolder

    什么是Surface? android API的解释是:Handle onto a raw buffer that is being managed by the screen compositor ...

  4. 完美解释if-modified-since/not-modified 文件头的意义

    http://www.cnblogs.com/zh2000g/archive/2010/03/22/1692002.html 很好很强大

  5. 行内js函数调用

    <ul> <li onclick=abc(this);><a href="javascript:void(0);">12234588</a ...

  6. MySQL 解压包 安装

    1.解压 2.配置mysql bin的环境变量 3.配置my-defalue.ini 配置文件 或自己建立一个my.ini文件 [mysqld] basedir=F:\mysql\mysql-5.6. ...

  7. 如何在页面进入时就加载js

    页面一打开就执行JS的代码! onLoadwindow.onLoad=function(){}window.onload=function(){ } 补充:window.onload和doucumen ...

  8. 【转】Python 日期和时间

    本文转自:http://www.runoob.com/python/python-date-time.html Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Pytho ...

  9. log4j输出日志到文件

    输出端Appender Appender用来指定日志信息输出到哪个地方,可以同时指定多个输出目的地.Log4j允许将信息输出到许多不同的输出设备中,一个log信息输出目的地就叫做一个Appender. ...

  10. 字符串0.在php和js中转换为布尔类型 值是false还是true

    在php 中 $a = '0'; $b = (bool)$a; var_dump($a);//输出false 在js中官方说明: Note:If the value parameter is omit ...