Home >Web Front-end >CSS Tutorial >How to make a star using CSS3
Production principle: There is a detailed explanation in my last essay. Since the balls made by this method are relatively performance-intensive, I only made 3 small balls. You can test the effect.
<!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>
For more articles on how to use CSS3 to make stars, please pay attention to the PHP Chinese website!