用CSS3实现一个球体效果

现代浏览器对CSS已经支持的很好了,有了旋转、变形、渐变、阴影等支持,我们可以轻易的用这些属性来画一个圆形,甚至是一个球体,本文就来个demo,大家可以看看。

<style type="text/css"> .stage { width: 150px; height: 150px; display: inline-block; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .ball { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; -webkit-animation: rotateMove 10s linear infinite; -moz-animation: rotateMove 10s linear infinite; -ms-animation: rotateMove 10s linear infinite; -o-animation: rotateMove 10s linear infinite; animation: rotateMove 10s linear infinite; background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); } .ball:before { content: ""; position: absolute; top: 1%; left: 5%; width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%); -webkit-filter: blur(5px); z-index: 2; } @-webkit-keyframes rotateMove { 100% { -webkit-transform: rotateZ(360deg); } } @keyframes rotateMove { 100% { transform: rotateZ(360deg); } } </style> <section class="stage"> <figure class="ball"></figure> </section>

给球体加了个ratateZ实现了旋转,但要想实现任意方向的转动,靠这些代码还是不够的,可以通过threejs来做。

相关阅读