征战《天下》TO马黑黑（学习车轮按钮）
<style>
.hy {
top:120px;left:-352px;
position: relative;
width: 1300px;
height: 700px;
background: #FFF url('https://pic.imgdb.cn/item/626386e9239250f7c5ac98e5.jpg') no-repeat center/cover;
box-shadow: 4px 4px 5px #888;
border-radius:12px;
}
/* 车轮1和音乐关联 */
.fan1 {
--ss: 60px;
left: 1053px; top: 419px;
width: var(--ss);
height: var(--ss);
background: linear-gradient(transparent 44%,#ffff33 48%, transparent 54%),
linear-gradient(45deg,transparent 44%,#ffff33 48%, transparent 54%),
linear-gradient(90deg,transparent 44%,#ffff33 48%, transparent 54%),
linear-gradient(135deg,transparent 44%,#ffff33 48%, transparent 54%);
border: calc(var(--ss) / 30) solid #ffff99;
border-radius: 50%;
position: absolute;
cursor: pointer;
animation: rot1 .5s linear infinite;
}
@keyframes rot1 { to { transform: rotate(1turn); } }
/* 车轮2 */
.fan2 {
--ss: 49px;
left: 1134px; top: 183px;
width: var(--ss);
height: var(--ss);
background: linear-gradient(transparent 46%,#FFF 47%, transparent 54%),
linear-gradient(45deg,transparent 46%,#FFF 47%, transparent 54%),
linear-gradient(90deg,transparent 46%,#FFF 47%, transparent 54%),
linear-gradient(135deg,transparent 46%,#FFF 47%, transparent 54%);
border: calc(var(--ss) / 30) solid #FFF;
border-radius: 50%;
position: absolute;
animation: rot2 .2s linear infinite;
}
@keyframes rot2 { to { transform: rotate(1turn); } }
/* 文字走马灯 */
.txtFly {
position: absolute;
--w: 300px;
width: var(--w);
left: 550px;
top: 610px;
overflow: hidden;
}
.txtFly div {
word-break: keep-all;
white-space: nowrap;
font: normal 20px /22px '微软雅黑';
color:#777777; text-shadow: 0 0 2px #fff;
animation: fly 32s linearinfinite;
}
/* 走马灯动画 */
@keyframes fly {
from { transform: translateX(100%); }
to { transform: translateX(calc(-180% - var(--w))); }
}
</style>
<div class="hy">
<div class="fan1"></div>
<div class="fan2"></div>
<div style="position: absolute; left:80px; top: 237px; width:576px; opacity: .95;">
<img alt="" src="https://pic.imgdb.cn/item/62638633239250f7c5aae92d.gif"/>
</div>
<div class="txtFly" >
<div>跃马扬鞭四野八荒，极目无边天地广。誓让九州归一统，吞吐风云气象。平天下，开新宇，功昭日月长！</div>
</div></div><br><br><br><br><br><br><br><br><br><br>
<script language="javascript">
let iBox = document.querySelector(".fan1");
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=1811422235.mp3";
au.autoplay = true;
au.loop = true;
iBox.onclick = function() {
au.paused ? (au.play(), this.style.animationPlayState = "running") : (au.pause(), this.style.animationPlayState
= "paused");
}
</script> 提醒：只有黄色车轮和音乐关联。 @马黑黑车轮的也做好了。有车轮有风扇，这个按钮也算是全乎了{:4_173:}
买一送一，弄了俩车轮。一个是战场上的，音乐受控，一个是跨越千年的虚空里的，跟音乐不关联。
@绿叶清舟 喜欢你上次分享的《天下》的歌曲，直接拿来用了，谢谢{:4_187:} 这个有历史质感。赞。 红影朋友下午好！这两个飛转车轮，为整个画面增色不少，似乎感到了《征战天下》的历史厚重感。你真棒！ 红影这个制作真有气势，漂亮。赞！{:4_199:} 哇 红影更有想法{:4_189:}播放器直接变车轮了，好创意啊，真棒！！
歌曲图片融合的完美 ，赞~！！
{:4_187:}{:4_199:} 红影 发表于 2022-4-23 14:01
@绿叶清舟 喜欢你上次分享的《天下》的歌曲，直接拿来用了，谢谢
不用客气的了 这个制作太棒啦{:4_204:} 车轮滚滚向前，推动历史发展。这个设计得一片金戈铁马之宏大画卷。{:4_178:} 马黑黑 发表于 2022-4-23 14:11
这个有历史质感。赞。
去百度翻半天，找了个比较中意的背景，再弄两个透明图，组合到一起觉得还不错{:4_173:} 梦油 发表于 2022-4-23 15:18
红影朋友下午好！这两个飛转车轮，为整个画面增色不少，似乎感到了《征战天下》的历史厚重感。你真棒！
我还弄了个火焰动图，正好上次找的，这次用上了{:4_173:} 加林森 发表于 2022-4-23 16:51
红影这个制作真有气势，漂亮。赞！
和黑黑说要再做个车轮的，然后想到古代战车，想到清舟曾分享的那首歌，就组合了这个{:4_173:} 红影 发表于 2022-4-23 20:28
和黑黑说要再做个车轮的，然后想到古代战车，想到清舟曾分享的那首歌，就组合了这个
漂亮的组合 大猫咪 发表于 2022-4-23 19:50
哇 红影更有想法播放器直接变车轮了，好创意啊，真棒！！
歌曲图片融合的完美 ，赞~！！
做车轮很挺像的吧，{:4_173:}黑黑说这个能做风扇还能做车轮，我就各试了一下{:4_173:} 绿叶清舟 发表于 2022-4-23 20:06
不用客气的了
上次在你的帖子里听到这首歌，印象特别深刻，想做古代题材的，立即就想到了这歌{:4_173:} 红影 发表于 2022-4-23 20:33
做车轮很挺像的吧，黑黑说这个能做风扇还能做车轮，我就各试了一下
非常象 估计老黑就是秦朝穿越来的 {:4_170:} 绿叶清舟 发表于 2022-4-23 20:06
这个制作太棒啦
谢谢清舟，这个转动按钮挺有趣的，看到东篱用来做了儿童手里的风车，黑黑做了梯田里的风车，都挺好看的{:4_173:} 樵歌 发表于 2022-4-23 20:08
车轮滚滚向前，推动历史发展。这个设计得一片金戈铁马之宏大画卷。
被我天空里也放了一辆战车，有点怪的吧{:4_173:}只是想取一份含义，可能透明度再透明点可能更好。