如何用CSS3做星体

2020-11-27 来源：钮旅网
制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 padding: 0;
 margin: 0;
 }
body {
 background-color: black;
 }
.taiYang {

 width: 80px;
 height: 80px;
 border-radius: 40px;
 box-shadow: 0 0 30px 30px pink;

 opacity: 0.5;
 position: absolute;
 top: 50%;
 margin-top: -40px;
 margin-left: -40px;
 left: 50%;
 transform: rotateX(70deg);
 transform-style: preserve-3d;
 }
.ty {
 width: 80px;
 height: 80px;
 opacity: 0.5;
 border: 1px solid #EFF57E;
 background-color: #EFF57E;
 border-radius: 50%;

 position: absolute;
 }

 .diQiuGD {
 width: 600px;
 height: 600px;
 border-radius: 300px;
 border: 1px solid white;
 position: absolute;
 top: 50%;
 margin-top: -300px;
 margin-left: -300px;
 left: 50%;
 transform-style: preserve-3d;
 }
.diQiu {
 width: 40px;
 height: 40px;
 box-shadow: 0 0 20px 20px darkgoldenrod;
 border-radius: 20px;
 background-color: green;
 top: 20px;
 left: 425px;
 position: absolute;
 transform: rotateX(30deg);
 transform-style: preserve-3d;
 }
.dq {
 width: 40px;
 height: 40px;
 background-color: green;
 border-radius: 50%;
 position: absolute;
 }
 .yueLiangGD{
 width: 150px;
 height: 150px;
 border-radius: 80px;
 border: 1px solid white;
 position: absolute;
 top: 50%;
 margin-top: -75px;
 margin-left: -75px;
 left: 50%;
 transform-style: preserve-3d;
 }
.yueLiang {
 width: 20px;
 height: 20px;
 box-shadow: 0 0 10px 10px greenyellow;
 border-radius: 10px;
 background-color: goldenrod;
 top: 102px;
 left: 130px;
 position: absolute;
 transform-style: preserve-3d;
 }
.yl {
 width: 20px;
 height: 20px;
 background-color: goldenrod;
 border-radius: 50%;
 position: absolute;
 }
@keyframes faguang {
 0% {
 box-shadow: 0 0 0 10px white;
 }
 50% {
 box-shadow: 0 0 50px 50px white;
 }
 100% {
 box-shadow: 0 0 0 10px white
 }
}
 .animation2 {
 animation: faguang 3s linear infinite;
 }

 @keyframes zizhuan {
 from {
 rotateX(0 deg) rotateY(0 deg)
 }
 to {
 transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
 }
 }
@keyframes zizhuan1 {
 from {
 rotateX(0 deg) rotateY(0 deg)
 }
 to {
 transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);
 }
 }
.animation {
 animation: zizhuan 10s linear infinite;
 }
.animation1 {
 animation: zizhuan1 3s linear infinite;
 }
</style>
</head>
<body>
<p class="taiYang animation2" id="taiYang">
<p class="diQiuGD animation">
 <p id="diQiu">
 <p class="yueLiangGD animation1">
 <p id="yueLiang"></p>
 </p>
 </p>
 </p>
</p>
</body>
</html>
<script>
 window.onload = function () {
 function zaoQiu(id, className) {
 var ele = document.getElementById(id);
 for (var i = 0; i < 36; i++) {
 var p = document.createElement("p");
 p.className = className;
 ele.appendChild(p);
 }
 var ps = document.getElementsByClassName(className);
 for (var i = 0; i < 18; i++) {
 ps[i].style.transform = "rotateY(" + 10 * i + "deg)";
 }
 for (var i = 18; i < ps.length; i++) {
 ps[i].style.transform = "rotateX(" + 10 * i + "deg)";
 }
 }
 zaoQiu("taiYang", "ty");
 zaoQiu("diQiu", "dq");
 zaoQiu("yueLiang", "yl");
 }
</script>
更多如何用CSS3做星体相关文章请关注PHP中文网！
显示全文
全部栏目

如何用CSS3做星体
