<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #000; } .box{ width: 250px; height: 250px; border: 1px dashed red; margin:100px auto; position: relative; border-radius: 50%;
/* 让子盒子保持3d效果*/
transform-style:preserve-3d;
/*transform:rotateX(30deg) rotateY(-30deg);*/
animation:gun 8s linear infinite; }
.box>div{ width: 100%; height: 100%; position: absolute; text-align: center; line-height: 250px; font-size:60px; color:#daa520; }
.left{ background-color: rgba(255,0,0,0.3); /* 变换中心*/ transform-origin: left; /* 变换*/ transform:rotateY(90deg) translateX(-125px); }
.right{ background:rgba(0,0,255,0.3); transform-origin: right; /* 变换*/ transform:rotateY(90deg) translateX(125px); }
.forward{ background: rgba(255,255,0,0.3); transform:translateZ(125px); }
.back{ background: rgba(0,255,255,0.3); transform:translateZ(-125px); }
.up{ background: rgba(255,0,255,0.3); transform:rotateX(90deg) translateZ(125px); }
.down{ background: rgba(99,66,33,0.3); transform:rotateX(-90deg) translateZ(125px); }
@keyframes gun { 0%{ transform:rotateX(0deg) rotateY(0deg); }
100%{ transform:rotateX(360deg) rotateY(360deg); } } h2{ margin: 40px auto; font-size: 50px; font-family: "微软雅黑"; font-weight: normal; text-align: center; text-shadow: 0px 0px 10px #ffe843;/*text-shadow 文本阴影 : 阴影水平位移 阴影垂直位移 模糊程度 阴影颜色*/ animation: bigger 2s infinite alternate; } @keyframes bigger { 0%{
} 100%{ text-shadow: 0px 0px 30px #fdffd1; color: deeppink; } } </style></head><body><div class="box"> <div class="up">赤霄</div> <div class="down">重黎</div> <div class="left">九歌</div> <div class="right">雪月</div> <div class="forward">凝雨</div> <div class="back">望舒</div></div><h2>万物有灵，夺其灵而铸之与器，是为器灵。</h2></body></html>
新人！喜欢的请点个赞！谢谢！
转载于:https://www.cnblogs.com/Gabriels/p/6296190.html
相关资源：JAVA上百实例源码以及开源项目