我目前有一个球体形状,但是,我正在尝试想办法在我的网站上将其旋转成一个圆圈,这是我当前的代码:
<style>
b.ball {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<style>
<b class="ball"></b>
上面的代码在页面上放置了一个形状。
如何旋转这个球体使其自转?不是在整个页面周围,而是在它自己的区域,而不是整个页面。我已经用谷歌搜索了它,但我还没有看到任何特别解决这个问题的东西。
最佳答案
您可以使用 css 动画:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
动画转换:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms
只需添加:
.ball {
animation: spin 3s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
虽然您需要使用前缀,我已将其包含在演示中:http://jsfiddle.net/99bds/
关于javascript - 在网页上旋转/旋转球体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19436060/