《时光洪流》to 马黑黑（学习小风扇按钮）
<style>.hy {
top:120px;left:-302px;
position: relative;
width: 1200px;
height: 636px;
background: #FFF url('https://pic.imgdb.cn/item/6262d393239250f7c59cc445.jpg') no-repeat center/cover;
box-shadow: 4px 4px 5px #888;
border-radius:12px;
}
.fan {
--ss: 116px;
left: 771px; top: 362px;
width: var(--ss);
height: var(--ss);
background: linear-gradient(transparent 46%,#CEA80F 47%, transparent 54%),
linear-gradient(45deg,transparent 46%,#CEA80F 47%, transparent 54%),
linear-gradient(90deg,transparent 46%,#CEA80F 47%, transparent 54%),
linear-gradient(135deg,transparent 46%,#CEA80F 47%, transparent 54%);
border: calc(var(--ss) / 30) solid #DEB510;
border-radius: 50%;
position: absolute;
cursor: pointer;
animation: rot 1.2s linear infinite;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="hy">
<div class="fan"></div>
<div style="position: absolute; left:60px; top: 140px; width:451px; opacity: .95;">
<img alt="" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif"/>
</div>
</div><br><br><br><br><br><br>
<script language="javascript">
let iBox = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "https://music.163.com/song/media/outer/url?id=1868943615.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_187:} 红影这个制作真漂亮，好有创意的。真好！{:4_199:} 加林森 发表于 2022-4-23 08:25
红影这个制作真漂亮，好有创意的。真好！
那个转动的十字我嫌有点少，又多加两条，这样即使暂停看上去也挺不错{:4_173:} 红影 发表于 2022-4-23 08:42
那个转动的十字我嫌有点少，又多加两条，这样即使暂停看上去也挺不错
挺漂亮的制作。我也跟到学，去制作一个出来。 豪华版风扇！点32个赞！ 红影对HTML、CSS、JS的理解与掌握，迈出的步伐已经很可观了 马黑黑 发表于 2022-4-23 08:48
红影对HTML、CSS、JS的理解与掌握，迈出的步伐已经很可观了
因为我问得最多呗，你的每个帖子下面我都有十万个为什么，感谢黑黑的耐心解答。跟着黑黑学习是很开心的事{:4_187:} 马黑黑 发表于 2022-4-23 08:47
豪华版风扇！点32个赞！
跟你学的代码做礼物送你，不嫌弃就好{:4_173:} 加林森 发表于 2022-4-23 08:43
挺漂亮的制作。我也跟到学，去制作一个出来。
那个风扇的外边框我弄窄了点，是为了适应这个图图的。队长要是做可以恢复原来的宽度。
期待队长的作品{:4_187:} 红影朋友早晨好！你学得真快，真好，学以致用啊。这真是一幅十分优秀的音画作品，那些在海面上翱翔的是海鸥吗？它们为整个画面增添了生气。 红影 发表于 2022-4-23 09:30
跟你学的代码做礼物送你，不嫌弃就好
怎么会呢 红影 发表于 2022-4-23 09:29
因为我问得最多呗，你的每个帖子下面我都有十万个为什么，感谢黑黑的耐心解答。跟着黑黑学习是很开心的事 ...
有长进就好 红影 发表于 2022-4-23 09:31
那个风扇的外边框我弄窄了点，是为了适应这个图图的。队长要是做可以恢复原来的宽度。
期待队长的作品{: ...
嗯嗯。 梦油 发表于 2022-4-23 09:51
红影朋友早晨好！你学得真快，真好，学以致用啊。这真是一幅十分优秀的音画作品，那些在海面上翱翔的是海鸥 ...
是的，加的一个小动图在里面{:4_173:} 马黑黑 发表于 2022-4-23 09:53
有长进就好
必须有长进啊，否则辜负你辛苦教学的苦心了{:4_187:} 红影 发表于 2022-4-23 12:08
必须有长进啊，否则辜负你辛苦教学的苦心了
那也是，每一个人都有所进步也是我的愿景 红影 发表于 2022-4-23 12:07
是的，加的一个小动图在里面
红影朋友下午好！这可真是点睛之笔啊！ 色彩真美，歌也好喜欢，好制作，赞！ 那几只海鸥点缀的真漂亮，欣赏学习！
{:4_187:}{:4_199:} 马黑黑 发表于 2022-4-23 12:33
那也是，每一个人都有所进步也是我的愿景
被黑黑带起一大批学徒来了{:4_173:}