【发布时间】：2020-02-07 12:44:36
【问题描述】：
我想旋转一个圆形的 div，比如 8 个球。就像 8 球一样，这个 div 里面有一个数字，背景为白色。球如何旋转，就像这个 div 应该通过单击按钮旋转。另外，旋转时数字应该会改变。
我已经完成了我的想法但失败了，它仅在重新加载并且旋转不正确并且我也不知道如何更改数字时才有效。
* {
box-sizing: border-box;
}
.eight-ball {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
border-radius: 50%;
display: inline-block;
background: rgb(33, 139, 220);
background: -moz-linear-gradient(top, rgba(33, 139, 220, 1) 0%, rgba(14, 92, 154, 1) 100%);
background: -webkit-linear-gradient(top, rgba(33, 139, 220, 1) 0%, rgba(14, 92, 154, 1) 100%);
background: linear-gradient(to bottom, rgba(33, 139, 220, 1) 0%, rgba(14, 92, 154, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#218bdc', endColorstr='#0e5c9a', GradientType=0);
}
.eight-ball-inner-white {
width: 300px;
height: 300px;
overflow: hidden;
position: absolute;
top: 30px;
left: 6px;
border-radius: 50%;
display: inline-block;
transition: all ease 0.5s;
background: rgb(224, 235, 245);
background: -moz-linear-gradient(top, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
background: -webkit-linear-gradient(top, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
background: linear-gradient(to bottom, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ebf5', endColorstr='#becdd6', GradientType=0);
}
.eight-ball-inner-white span {
color: #222b32;
position: absolute;
top: 50%;
left: 50%;
font-size: 152px;
transform: translate(-50%, -50%) rotate(16deg);
}
.rotate-ball {
-webkit-animation: rotate-ball linear 2s;
-moz-animation: rotate-ball linear 2s;
-ms-animation: rotate-ball linear 2s;
-o-animation: rotate-ball linear 2s;
animation: rotate-ball linear 2s;
}
.rotate-ball .spin-ball {
-webkit-animation: ballspin linear 2s;
-moz-animation: ballspin linear 2s;
-ms-animation: ballspin linear 2s;
-o-animation: ballspin linear 2s;
animation: ballspin linear 2s;
}
@-webkit-keyframes ballspin {
0% {
left: 6px;
top: 30px;
}
50% {
left: 170%;
top: 150px;
}
100% {
left: 6%;
top: 30px;
}
}
@-webkit-keyframes rotate-ball {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(120deg);
}
100% {
transform: rotate(220deg);
}
}<div class="eight-ball rotate-ball">
<div class="eight-ball-inner-white spin-ball">
<span>88</span>
</div>
</div>
<button>Generate Ball</button>【问题讨论】：
-
你的目标是什么？球应该侧向旋转还是“滚动”？点击时应显示哪个数字？
-
我的目标是从左到右设置内部白色 div 的动画并返回到正常位置。任何数字都可以来自 1 - 90
标签： jquery html css css-transitions css-transforms