代码：

<!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. 深入学习 celery

    一.amqp交换 参考链接: http://www.cnblogs.com/ajianbeyourself/p/4950758.html

  2. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

  3. cssReset - css初始化

    /*cssReset.css文件内容*/@charset "utf-8"/*整个页面的文字和背景色*/html{color:#000;background:#FFF;}/*设置外边 ...

  4. 即时聊天IM之二 openfire 整合现有系统用户

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com  综述: ...

  5. 学习PYTHON之路， DAY 6 - PYTHON 基础 6 (模块)

    一 安装,导入模块 安装: pip3 install 模块名称 导入: import module from module.xx.xx import xx from module.xx.xx impo ...

  6. maven webjar构建及使用

    这么做的目的想要把前端静态文件,css啊js啊一堆的放在一个maven工程下管理,需要的时候调用jar包直接引用. 1.把要打包文件放到另外的maven项目的/src/main/resources下 ...

  7. WeCenter二次开发教程(一)：熟悉模板结构

    <1>程序文件目录介绍: app – 应用目录 models – 模型目录 plugins – 插件目录 static – 静态文件 system – 系统目录 views – 模板目录 ...

  8. blade and soul factions

    Faction You will be asked to join one of the elite Factions as a rising Martial Artist no matter wha ...

  9. ubuntu下安装python各类运维用模块（以后补充用途）

    环境:ubuntu 16.04LTS,python3,python2 已安装:pip3,pip2 注:基于Python自动化运维这本书上介绍的各模块而来 1.python-rrdtool(just f ...

  10. config配置文件的一些东西

    /* 模板相关配置 */ 'TMPL_PARSE_STRING' => array( '__STATIC__' => __ROOT__ . '/Public/static', '__ADD ...