Heim > Artikel > Web-Frontend > So erstellen Sie einen Stern mit CSS3
Herstellungsprinzip: Eine ausführliche Erklärung gibt es in meinem letzten Aufsatz. Da die nach dieser Methode hergestellten Bälle relativ leistungsintensiv sind, habe ich nur 3 kleine Bälle hergestellt. Sie können die Wirkung testen.
<!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>
Weitere Artikel zur Verwendung von CSS3 zum Erstellen von Sternen finden Sie auf der chinesischen PHP-Website!