分享CSS3 H5 模拟双色球效果
2015年03月26日 11:11
1 点赞
0 评论
更新于 2025-11-21 18:35
源码
以下是使用 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;
/* 背景渐变，兼容 WebKit 内核浏览器 */
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>
<!-- 引入 Zepto 库 -->
<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>
代码解释
HTML 结构：
- 使用两个
div分别表示红球区和蓝球区，每个div包含一个header标签用于显示区域名称，以及一个ul列表用于显示球号。 - 每个球号使用
li标签表示。
- 使用两个
CSS 样式：
- 通过
*选择器去除全局的默认外边距和内边距。 - 为
header标签设置加粗字体。 - 去除
ul列表的默认样式。 - 分别为红球区和蓝球区的容器设置宽度和浮动样式。
- 为每个球设置基本样式，包括大小、字体、边框、背景渐变等。
- 当鼠标悬停在球上时，改变背景渐变颜色。
- 为选中的红球和蓝球设置不同的背景渐变颜色和字体颜色。
- 通过
JavaScript 交互：
- 引入 Zepto 库，它是一个轻量级的 JavaScript 库，类似于 jQuery。
- 为红球区和蓝球区的球添加点击事件，当点击球时，使用
toggleClass方法切换球的选中样式。
通过以上代码，我们可以实现一个简单的 CSS3 H5 模拟双色球效果，用户可以点击球来选择自己心仪的号码。