如何用CSS3做星体

来源：懂视网责编：小采时间：2020-11-27 18:52:57

如何用CSS3做星体

如何用CSS3做星体:制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

推荐度：

点击下载本文 文档为doc格式

导读如何用CSS3做星体:制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了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中文网！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何用CSS3做星体

推荐度：

点击下载本文 文档为doc格式

标签：星体 css css3

热门焦点

如何用CSS3做星体

如何用CSS3做星体

如何用CSS3做星体

最新推荐

猜你喜欢

热门推荐