基本信息
源码名称：动态球体转动（transform+ keyframes）
源码大小：2.85KB
文件格式：.html
开发语言：js
更新时间：2020-06-12
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

纯css实现动态球体转动

动态效果： 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px; 
padding: 0px;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
#box{
width: 100%;
height: 100%;
background-color: black;
}
#box01{
width: 500px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -250px;
border-radius: 100%;
box-shadow: 0 0 50px white;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateY(-20deg);
animation: anim1 10s infinite linear;
}
#box01 ul{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
transform-style: preserve-3d;
}
#box01 ul li{
width: 100%;
height: 100%;
border: 1px solid red;
position: absolute;
left: 0px;
top: 0px;
transform-style: preserve-3d;
border-radius:100% ;
box-shadow: 0px 0px 50px red;
}
/**
* 寻找id为box01里的ul标签中的li标签
* nth-child(1):第一个
*/
#box01 ul li:nth-child(1){
transform: rotateY(20deg);
}
#box01 ul li:nth-child(2){
transform: rotateY(40deg);
}
#box01 ul li:nth-child(3){
transform: rotateY(60deg);
}
#box01 ul li:nth-child(4){
transform: rotateY(80deg);
}
#box01 ul li:nth-child(5){
transform: rotateY(100deg);
}
#box01 ul li:nth-child(6){
transform: rotateY(120deg);
}
#box01 ul li:nth-child(7){
transform: rotateY(140deg);
}
#box01 ul li:nth-child(8){
transform: rotateY(160deg);
}
#box01 ul li:nth-child(9){
transform: rotateX(20deg);
}
#box01 ul li:nth-child(10){
transform: rotateX(40deg);
}
#box01 ul li:nth-child(11){
transform: rotateX(60deg);
}
#box01 ul li:nth-child(12){
transform: rotateX(80deg);
}
#box01 ul li:nth-child(13){
transform: rotateX(100deg);
}
#box01 ul li:nth-child(14){
transform: rotateX(120deg);
}
#box01 ul li:nth-child(15){
transform: rotateX(140deg);
}
#box01 ul li:nth-child(16){
transform: rotateX(160deg);
}
@keyframes anim1{
0%{
transform: rotateX(60deg) rotateY(-20deg) rotateZ(0deg);
}
100%{
transform: rotateX(60deg) rotateY(-20deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div id="box">
<div id="box01">
<ul id="ul01">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

</div>
</body>
</html>