代码：

<!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. dubbo & zookeeper & springMVC

    一.安装准备 1.环境简介 名称 版本 OS Mac OS X 10.11.5 JDK 1.8.0_51 dubbo 2.5.4 tomcat 8.0.35 Zookeeper 3.4.8 maven ...

  2. Execl 使用技巧

    1. =COUNTIF(C:C;"*OS7*")   某一列中包含OS7的数量总数138

  3. 【Java】异常处理_学习笔记

    异常: 1.格式1: try { //业务代码 } catch(Exception e) { //异常处理代码 } 说明: a.   异常抛出:执行try里的代码,系统会自动生成一个异常对象,该对象会 ...

  4. 【Hector slam】A Flexible and Scalable SLAM System with Full 3D Motion Estimation

    作者总结了SLAM前端和后端的区别 While SLAM frontends are used to estimate robot movement online in real-time, the ...

  5. 并列统计CASE WHEN

    select sum(case when depart = 'Physical' then 1 else 0 end) PhyTotal, sum(case when depart = 'Chemis ...

  6. AngularJS的$watch用法

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  7. Minimum Depth of Binary Tree [LeetCode]

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  8. 课堂作业二 PAT1025 反转链表

    MyGitHub 终于~奔溃了无数次后,看到这个结果 ,感动得不要不要的::>_<:: 题目在这里 题目简述:该题可大致分为 输入链表 -> 链表节点反转 -> 两个步骤 输入 ...

  9. Python：list用法

    list是一种有序的集合,可以随时添加和删除其中的元素. 定义 空list >>> a_list=[] >>> a_list [] 普通 >>> ...

  10. 爹地，我找到了！15个极好的Linux find命令示例

    爹地,我找到了!15个极好的Linux find命令示例 http://blog.jobbole.com/48931/ 妈咪,我找到了!15个实用的Linux find命令示例 http://blog ...