如何用CSS3做星体

高洛峰原创: 2017-03-04 16:53:521090浏览

制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了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 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：css继承和层叠的详解下一条：css盒子边框样式介绍

【24期】《PHP小白到大牛》线上班，开始报名了！

查看更多