css转盘
时间: 2023-07-23 17:05:52 浏览: 44
以下是一个简单的 CSS 转盘的例子:
HTML 代码:
```
<div class="roulette">
<div class="roulette-item"><span>1</span></div>
<div class="roulette-item"><span>2</span></div>
<div class="roulette-item"><span>3</span></div>
<div class="roulette-item"><span>4</span></div>
<div class="roulette-item"><span>5</span></div>
<div class="roulette-item"><span>6</span></div>
<div class="roulette-item"><span>7</span></div>
<div class="roulette-item"><span>8</span></div>
<div class="roulette-item"><span>9</span></div>
<div class="roulette-item"><span>10</span></div>
</div>
```
CSS 代码:
```
.roulette {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 300px;
border-radius: 50%;
background-color: #f7f7f7;
position: relative;
overflow: hidden;
}
.roulette-item {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform-origin: center center -150px;
transition: all 6s cubic-bezier(0.2, 1, 0.3, 1);
}
.roulette-item:nth-child(1) { transform: rotate(0deg); }
.roulette-item:nth-child(2) { transform: rotate(36deg); }
.roulette-item:nth-child(3) { transform: rotate(72deg); }
.roulette-item:nth-child(4) { transform: rotate(108deg); }
.roulette-item:nth-child(5) { transform: rotate(144deg); }
.roulette-item:nth-child(6) { transform: rotate(180deg); }
.roulette-item:nth-child(7) { transform: rotate(216deg); }
.roulette-item:nth-child(8) { transform: rotate(252deg); }
.roulette-item:nth-child(9) { transform: rotate(288deg); }
.roulette-item:nth-child(10) { transform: rotate(324deg); }
.roulette-item span {
display: inline-block;
font-size: 2em;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
line-height: 300px;
}
.roulette:hover .roulette-item {
transform: rotate(2160deg);
}
```
这个例子中的 CSS 转盘由一个包含 10 个子元素的容器组成,每个子元素包含一个数字并沿着圆周等间距分布。当鼠标悬停在容器上时,所有子元素将以旋转的方式进行 6 秒的动画,最终停在随机位置。
你可以根据需要自定义样式和动画效果。