May It Be （学习双圆环旋转代码）
<style>.hy { width: 1200px; height: 675px; position: relative;left:-302px; top: 120px;box-shadow:4px 4px 5px #333;
padding:2px;border-radius:8px;background:#666 url('https://pic.imgdb.cn/item/6268ec1d239250f7c5800d89.jpg')no-repeat
center/cover;}
.hy::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
background: url('https://pic.imgdb.cn/item/6268f0a1239250f7c58a5669.gif') no-repeat center/cover;
left:160px; top: 70px;
}
body { perspective: 3000px; }
.mBox {
--w: 320px;
left:446px; top: 170px;
display: flex;
justify-content: center;
align-items: center;
width: var(--w);
height: var(--w);
cursor: pointer;
position: absolute;
animation: rot 7s linear infinite;
}
.zBox {
position: absolute;
display: block;
border-style: dotted;
border-width: 2px;
border-color: transparent #cc3333 transparent #5B7AFA;
border-radius: 50%;
}
@keyframes rot { to { transform: rotate(-1turn); } }
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 2.2rem;
font-weight: bold;
color: #DFE5FD;
transform-origin: top;
animation: yao 1s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(12deg); }
to { transform: perspective(800px) rotatex(-12deg); }
}
</style>
<div class="hy">
<div id="baiBox" style="position: absolute; left:40px; top: 60px; ">May It Be</div>
<div class="mBox"></div></div><br><br><br><br><br><br><br><br><br><br>
<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len= ele.clientWidth;
let zStr = "";
let all = 110;
let angle = Math.floor(360 / all);
for(j=0; j< all; j++){
let wh =Math.floor(len- j * (len / all));
zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;
let au = document.createElement("audio");
au.src= "http://music.163.com/song/media/outer/url?id=2530077.mp3";
au.loop = true;
au.autoplay = flag;
au.style.display = "none";
ele.appendChild(au);
if(!flag) ele.style.animationPlayState = "paused";
ele.onclick = function(){
flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play
(),this.style.animationPlayState = "running",flag = true);
}
</script> 《May It Be》——Enya
May it be an evening star
但愿有一颗暮色之星
Shines down upon you
拂照着你
May it be when darkness falls
即使黑暗降临
Your heart will be true
你将揣着颗真诚的心
You walk a lonely road
孤独地上路
Oh! How far you are from home
噢，离家的路途有多远
Mornie utulie （Quenya: Darkness has fallen）
mornie utúlië （黑暗已经降临)
Believe and you will find your way
相信，而且你会找到路径
Mornie alantie（Quenya: Darkness has fallen）
mornie alantië （黑暗已经降临）
A promise lives within you now
如今希望在你心中不泯
May it be the shadow's call
但愿阴影的笼罩
Will fly away
将消逝
May it be your journey on
但愿你足下的旅途
To light the day
走向光明的天日
When the night is overcome
当黑夜逝去时
You may rise to find the sun
愿你起身迎接朝阳
Mornie utulie （Quenya: Darkness has fallen）
mornie utúlië （黑暗已经来临）
Believe and you will find your way
相信你会找到路径
Mornie alantie（Quenya: Darkness has fallen）
mornie alantië （黑暗已经来临）
A promise lives within you now
如今希望在你心中不泯
A promise lives within you now
如今希望在你心中不泯 这样的旋转看久了真有点沦陷的感觉，很有趣的代码。黑黑来收作业@马黑黑 {:4_187:} 樵歌说过，像黑洞，说法形象、得分，在这里得到认证 这个作品成熟大气，精品 漂亮的制作，真美！{:4_199:} 红影朋友下午好！这个图好壮观，不过，也把我看得我头昏眼花。{:4_189:} 这一个个的，都成大神了 {:5_106:} 一级棒的作业，好美，影儿现在的技艺已达娴熟精湛标准了{:4_187:} 科幻杰作。看了极像宇宙中的黑洞，貌似再看就要把人给吸进去了。 师妹创造性的运用马术，好生了得！{:4_187:} 马黑黑 发表于 2022-4-28 12:15
樵歌说过，像黑洞，说法形象、得分，在这里得到认证
那就当它是黑洞吧{:4_173:} 马黑黑 发表于 2022-4-28 12:16
这个作品成熟大气，精品
谢谢黑黑，前面总觉得少点什么，然后去找了个动图。 加林森 发表于 2022-4-28 12:24
漂亮的制作，真美！
谢谢队长，看到队长也做出来了，厉害{:4_187:} 梦油 发表于 2022-4-28 16:10
红影朋友下午好！这个图好壮观，不过，也把我看得我头昏眼花。
是啊，盯着看很容易头晕的{:4_173:} 来看你 发表于 2022-4-28 16:28
这一个个的，都成大神了
只是学习黑黑的代码而已，离大神还老远了{:4_173:} 红影 发表于 2022-4-29 22:27
谢谢黑黑，前面总觉得少点什么，然后去找了个动图。
作品是需要不断完善的 千羽 发表于 2022-4-28 17:28
一级棒的作业，好美，影儿现在的技艺已达娴熟精湛标准了
这个其实挺简单的，用了黑黑双圆环的代码，加个动图，就完了{:4_173:} 樵歌 发表于 2022-4-28 20:23
科幻杰作。看了极像宇宙中的黑洞，貌似再看就要把人给吸进去了。
嗯，这个看得久，我自己也觉得挺玄幻的呢。 红影 发表于 2022-4-29 22:27
那就当它是黑洞吧
形态像呢