Code:
<! DOCTYPE html>
<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 (Ten): hover{background-color: #9999FF;}
. BK Div:nth-child (one): hover{background-color: #007799;}
. BK div:nth-child: hover{background-color: #990099;}
</style>
<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>
CSS's transition transition exercise