CSS3를 사용하여 별을 만드는 방법-CSS 튜토리얼-php.cn

CSS3를 사용하여 별을 만드는 방법

高洛峰

풀어 주다： 2017-03-04 16:53:52

원래의

1536명이 탐색했습니다.

제작 원리: 지난 에세이에 자세한 설명이 나와 있습니다. 이 방법으로 만든 공은 상대적으로 성능 집약적이므로 작은 공 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 중국어 웹사이트에 주목하세요!