亚伦影音工作室 发表于 2024-11-24 21:20

请马老来控制雨

本帖最后由 亚伦影音工作室 于 2024-11-25 06:03 编辑 <br /><br /><style type="text/css">
.mnBox {
        top: 50px;
        position: relative;
        background: #333 url('https://pic.imgdb.cn/item/6731a660d29ded1a8c3ce42e.webp') no-repeat center/cover;
        height: 726px;
        width: 1285px;
      left: -340px;overflow: hidden;
        border: 1px solid;
        box-shadow: 0px 0px 0px 2px tan;
}
.mnBox iframe {
        position: absolute;
        left: -48px;;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain {
        width: 1px;
        height: 8px;
        top: -5px;
        left: 200px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 10px;
        background: #eee;
}

.rain::after { height: 12px; left: -70px; top: 50px; }

.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}
#player {
        position: absolute;z-index: 40;
        left:105px;
        bottom: 50px;
        width: 150px;
        height: 150px;
         opacity: 1;
        transition: .4s;
display: grid;
        place-items: center;
        --sp1: 0; --sp2: 1;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        cursor: pointer;
        transition: .4s;
}
#player::before {width: 150px;height: 150px;background:url(https://pic.imgdb.cn/item/65f0d8669f345e8d03ff5c34.png)no-repeat center/cover;
        opacity: var(--sp1);}
#player::after {width: 150px;height: 150px;background:url(https://pic.imgdb.cn/item/65f0d8299f345e8d03ff0b31.gif)no-repeat center/cover;
        opacity: var(--sp2);}

</style>


<divclass="mnBox"id="mnBox">
<div id="player" title="暂停/播放" ></div>
<span class="rain"></span>
<span class="circle"></span>

        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/b7/4d/a0/4da04054a721151e338e2f10b3c39c64/audio.mp3" autoplay loop>
</div>
<script >
function rain() {
        var str = "";
        for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1200);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }
        for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*40+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}

rain();
</script>
<script>
let mState = () => aud.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
player.onclick = () => aud.paused ? aud.play(): aud.pause();


</script>

红影 发表于 2024-11-24 21:48

等着看如何解决的{:4_204:}

夕阳黄昏 发表于 2024-11-24 22:42

https://pic.imgdb.cn/item/6745a2dcd0e0a243d4d1556c.jpg

亚伦影音工作室 发表于 2024-11-25 05:52

请老师看看

本帖最后由 亚伦影音工作室 于 2024-11-25 06:10 编辑

夕阳黄昏 发表于 2024-11-24 22:42

let raindrops=mnBox.queryselectorAII('.rain');
let rainpops=mnBox.queryselectorAII('.circle');
let rainstate=() =>{aud.paused ? (raindrops.forEach(drop=>{drop.style.animationpiaystate='paused'}),rainpops.forEach(pop=>{pop.style.animationpiaystate='paused'})): (raindrops.forEach(drop=>{ drop.style.animationpiaystate='yunning'}),rainpops.forEach(pop=>{pop.style.animationpiaystate='yunning'}));};

let mState = () =>{rainstate, aud.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'));};
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
player.onclick = () => aud.paused ? aud.play(): aud.pause();

夕阳黄昏 发表于 2024-11-25 06:27

亚伦影音工作室 发表于 2024-11-25 05:52
let raindrops=mnBox.queryselectorAII('.rain');
let rainpops=mnBox.queryselectorAII('.circle');
l ...

好像少了个括号

亚伦影音工作室 发表于 2024-11-25 07:42

夕阳黄昏 发表于 2024-11-25 06:27
好像少了个括号

少在哪里？请指教！

夕阳黄昏 发表于 2024-11-25 08:09

本帖最后由 夕阳黄昏 于 2024-11-25 08:11 编辑

亚伦影音工作室 发表于 2024-11-25 07:42
少在哪里？请指教！
原帖的
<script >
function rain() {
      var str = "";
      for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1200);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
      }
      for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*40+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
      }
      document.getElementById('mnBox').innerHTML += str;
}

rain();
</script>
<script>
let mState = () => aud.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
player.onclick = () => aud.paused ? aud.play(): aud.pause();


</script>
修改为
<script >
function rain() {
      var str = "";
      for(i=0; i<50; i++) {
                var l = Math.ceil(Math.random()*1200);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
      }
      for(j=0;j<40; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*40+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
      }
      document.getElementById('mnBox').innerHTML += str;
}

rain();
let raindrops = mnBox.querySelectorAll('.rain');
let rainpops = mnBox.querySelectorAll('.circle');
let rainState = () => {
      aud.paused ? (raindrops.forEach( drop => {drop.style.animationPlayState='paused'}) , rainpops.forEach( pop => {pop.style.animationPlayState='paused'}))
                              : (raindrops.forEach( drop => {drop.style.animationPlayState='running'}) , rainpops.forEach( pop => {pop.style.animationPlayState='running'}));
}
let mState = () => {rainState(); aud.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'))};
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
player.onclick = () => aud.paused ? aud.play(): aud.pause();
</script>

亚伦影音工作室 发表于 2024-11-25 14:41

夕阳黄昏 发表于 2024-11-25 08:09
原帖的

修改为

老师的控件好厉害，学习了！谢谢夕阳老师！
页: [1]
查看完整版本: 请马老来控制雨