稻香
本帖最后由 马黑黑 于 2022-4-23 14:33 编辑 <br /><br /><style>.papa { left: -70px; width: 900px; height: 600px; position: relative; background-color: #eee; }
.papa::before { content: ''; position: absolute; width: 8px; height: 100px; left: calc(50% - 4px); top: 50%; background: #2f4f4f; }
.fan { position: absolute; width: 100px; height: 100px; left: calc(50% - 50px); top: calc(50% - 50px);cursor: pointer; animation: rot .25s linear infinite; }
.fan::before, .fan::after { content: ''; position: absolute; background: #c60046; }
.fan::before { width: 100%; height: 10px; left: calc(50% - 50px); top: calc(50% - 5px); }
.fan::after { width: 10px; height: 100%; left: calc(50% - 5px); top: calc(50% - 50px); }
.papa img { position: absolute; border: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div class="papa">
<img style="left: 0; bottom: 0; width: 200px; z-index: 10;" src="https://638183.freep.cn/638183/t22/tg.png" alt="" />
<img style="top: 0; right: 0; width: 900px; transform: rotateY(180deg); mix-blend-mode: multiply;" src="https://638183.freep.cn/638183/t22/tt.jpg" alt="" />
<div class="fan"></div>
</div>
<script>
let papa = document.querySelector(".papa");
let fc = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/04/21/cc9b3efd5f253beda2e987b3ba7969b5.mp3";
let flag = true;
au.autoplay = flag;
au.loop= true;
fc.appendChild(au);
chgc();
let cc = setInterval(chgc, 6000);
papa.onclick = function(){
flag ? (fc.style.animationPlayState = "paused", au.pause(), flag = false) :
(fc.style.animationPlayState = "running", au.play(), flag = true);
}
function chgc(){
let c1 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
let c2 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
papa.style.background = `linear-gradient(120deg,${c1},${c2})`;
}
</script>
老黑这个制作真漂亮，用了滤镜真是变化得很好看。{:4_199:} 加林森 发表于 2022-4-23 16:53
老黑这个制作真漂亮，用了滤镜真是变化得很好看。
梯田看着不错 马黑黑 发表于 2022-4-23 17:35
梯田看着不错
就是，很有层次感。 风车用伪元素制作也简便呢。底图加了动态渐变，让场景变化无穷。黑黑的制作真美{:4_199:} 加林森 发表于 2022-4-23 17:38
就是，很有层次感。
很美 红影 发表于 2022-4-23 19:04
风车用伪元素制作也简便呢。底图加了动态渐变，让场景变化无穷。黑黑的制作真美
条条道路通水吧 这个会变色的{:5_106:} 好玩，很有创意好听又好看 ！ 赞~~~~~~~~
{:4_187:}{:4_199:} 大猫咪 发表于 2022-4-23 19:44
这个会变色的 好玩，很有创意好听又好看 ！ 赞~~~~~~~~
猫咪晚上好。喝了没 马黑黑 发表于 2022-4-23 19:53
猫咪晚上好。喝了没
没最近不敢喝{:4_189:} 老黑喝了多少今天{:4_191:} 大猫咪 发表于 2022-4-23 19:56
没最近不敢喝 老黑喝了多少今天
今天只喝了三餐 都很美哈{:4_199:} 樵歌 发表于 2022-4-23 20:10
都很美哈
菇凉也美{:5_106:} 马黑黑 发表于 2022-4-23 19:12
条条道路通水吧
发现变色背景特别玄幻，非常棒{:4_187:} 红影 发表于 2022-4-23 20:39
发现变色背景特别玄幻，非常棒
还行的吧 马黑黑 发表于 2022-4-23 20:53
还行的吧
一直盯着那些变色背景，觉得有无限可能，真太棒了{:4_199:} 红影 发表于 2022-4-24 15:20
一直盯着那些变色背景，觉得有无限可能，真太棒了
随机的，但它们也有一个倾向。之前说过，JS的随机数有点弱，很多人称它获得的是为伪随机数。 马黑黑 发表于 2022-4-23 20:11
菇凉也美
主要是{:4_170:} 樵歌 发表于 2022-4-24 21:13
主要是
你还是很分得清主次 马黑黑 发表于 2022-4-24 17:14
随机的，但它们也有一个倾向。之前说过，JS的随机数有点弱，很多人称它获得的是为伪随机数。
也就是说它不是真正的无限的吧。