如何用CSS3做星體-css教學-PHP中文網

首頁

web前端

css教學

如何用CSS3做星體

高洛峰

Mar 04, 2017 pm 04:53 PM

css3

製作原理：在我的上一篇隨筆中有詳細的說明，由於這個方法製作的球，比較耗性能，就只做了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中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google

永恆的Web開發文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議

與部分元素的交易Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章：

使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我得到了完美的

組件級CMSApr 12, 2025 am 11:09 AM

當一個組件生活在數據查詢居住在附近的數據查詢的環境中時，視覺組件和

將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM

這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。我

'恢復”在CSS中有什麼作用？Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。

現代戀人Apr 12, 2025 am 10:58 AM

我喜歡這樣的東西。

See all articles

熱AI工具

熱工具

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中