CSS3 H5 模拟双色球效果源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 H5 模拟双色球效果</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
font-weight: bold;
}
ul{
list-style: none outside none;
}
#reddiv{
width: 660px;
float:left;
}
#bluediv{
width: 400px;
float: left;
margin: 0 0 0 60px;
}
li{
display: inline-block;
margin: 8px 5px;
padding: 5px;
width: 30px;
height: 30px;
font:bold 18px/30px arial;
border: 1px #ddd solid;
color:#444;
border-radius: 31px;
text-align:center;
background-image: -webkit-radial-gradient(circle at top,rgb(247, 247, 247),rgb(222, 222, 222));
background-image: radial-gradient(circle at top,rgb(247, 247, 247),rgb(222, 222, 222));
}
ul>li:hover{
cursor: pointer;
background-image: -webkit-radial-gradient(circle at top,rgb(247, 247, 247),rgb(255, 204, 204));
background-image: radial-gradient(circle at top,rgb(247, 247, 247),rgb(255, 204, 204));
}
#reddiv header{
color: red;
}
#bluediv header{
color: blue;
}
.redball{
color:#fff;
background-image: -webkit-radial-gradient(circle at top,rgb(255, 51, 51),rgb(255, 0, 0));
background-image: radial-gradient(circle at top,rgb(255, 51, 51),rgb(255, 0, 0));
}
.blueball{
color:#fff;
background-image: -webkit-radial-gradient(circle at top,rgb(0, 85, 204),rgb(0,0,225));
background-image: radial-gradient(circle at top,rgb(0, 85, 204),rgb(0,0,225));
}
</style>
</head>
<body>
<div id="reddiv">
<header>红球区</header>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>
</div>
<div id="bluediv">
<header>蓝球区</header>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script>
<script>
Zepto(function($){
$('#reddiv ul>li').click(function(){
$(this).toggleClass('redball');
})
$('#bluediv ul>li').click(function(){
$(this).toggleClass('blueball');
});
})
</script>
</body>
</html>
