本帖最后由 加林森 于 2022-4-25 22:07 编辑 <br /><br />杨柳青 发表于 2021-12-24 20:21
晚上好~~
过节能不能回家了啊？
<style>
.papa { left: -214px; width: 1024px; height: 700px; position: relative; background-color: #eee; }
.papa::before { content: ''; position: absolute; width: 8px; height: -200px; left: calc(10% - 4px); top: 180%; background: #2f4f4f; }
.fan { position: absolute; width: 100px; height: 100px; left: 200(50% - 50px); top: 300(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: 20; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div class="papa">
<img style="left:0; bottom: 0; width: 200px; z-index: 10;" src="https://pic.imgdb.cn/item/6266a8dd239250f7c5fa1fbc.png" alt="" />
<img style="top: 0; right: 0; width:1024px; transform: mix-blend-mode: multiply;" src="https://pic.imgdb.cn/item/6266a9de239250f7c5fd2562.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/24/afef333c6d520504c47a3de5bc06cfb9.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>
马黑黑 发表于 2021-12-24 20:19
谢谢
不客气
加林森 发表于 2021-12-24 20:24
不客气
应该的应该的