制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。
* { 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; }
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"); }
更多如何用CSS3做星体相关文章请关注PHP中文网！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607618.html
微信扫一扫 
支付宝扫一扫 
