{"html":"

\n \n \n \n \n \n \n

","css":".obj {\n position: relative;\n width: 200px;\n height: 200px;\n /* background-color: rgb(96, 96, 232); */\n transform-style: preserve-3d;\n transition: 0.5s all;\n transform: rotateX(-25deg) rotateY(20deg);\n}\n\n.objchild {\n animation: rotate 4s infinite linear;\n transform-style: preserve-3d;\n position: absolute;\n width: 100%;\n height: 100%;\n /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */\n}\n\n.objchild::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n /* background: rgb(37, 101, 230); */\n /* background: radial-gradient(center center, farthest-side , #9993, transparent); */\n filter: blur(20px);\n box-shadow: 0 0 200px 15px white;\n transform: rotateX(90deg) scale(1.1) translateZ(-120px);\n}\n\n.inn1 {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 30px;\n filter: blur(2px);\n transform: translateZ(-250px);\n background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );\n}\n\n.inn2 {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateZ(100px);\n background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );\n}\n\n.inn3 {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateX(-100px) rotateY(90deg);\n background: linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) );\n}\n\n.inn4 {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: translateX(100px) rotateY(90deg);\n background: linear-gradient( to top,rgb(10, 10, 78),rgb(96, 96, 232) );\n}\n\n.inn5 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(10, 10, 79);\n transform: rotateX(90deg) translateZ(-100px);\n}\n\n.inn6 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(46, 46, 46);\n transform: rotateX(90deg) translateZ(100px);\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate3d(0,1,0,0deg);\n }\n\n 100% {\n transform: rotate3d(0,1,0,360deg);\n }\n}"}

angry-wombat-84

👁 实时预览

📝 源代码