论坛 › 动画音画 › strike

马黑黑 发表于 2024-1-24 20:36

strike

本帖最后由 马黑黑 于 2024-1-25 09:34 编辑 <br /><br /><style>
#papa {
        position: relative;
        margin: -70px 0 0 calc(50% - 681px);
        width: 1199px;
        height: 622px;
        border-radius: 8px;
        background: radial-gradient(circle,transparent var(--radius), rgba(0,0,0,.5) calc(var(--radius) + 30%), rgba(0,0,0,.5) 0), url('https://638183.freep.cn/638183/t24/jpg/strike.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        cursor: pointer;
        z-index: 1;
        --radius: 0%;
}

</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1418092894" autoplay></audio>

<script>
(function (){
        var step = 10, rad = 0, raf = null;
        var render = () => {
                rad += step;
                if(rad <= 0 || rad >= 100) step = -step;
                papa.style.setProperty('--radius', rad + '%');
                raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(render);
        };
        var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
        aud.loop = false;
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('playing', mState, false);
        aud.addEventListener('ended', () => { cancelAnimationFrame(raf); aud.play(); }, false);
        papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-1-24 20:36

本帖最后由 马黑黑 于 2024-1-25 09:33 编辑

帖子代码
<style>
#papa {
      position: relative;
      margin: 0 0 0 calc(50% - 681px);
      width: 1199px;
      height: 622px;
      border-radius: 8px;
      background: radial-gradient(circle,transparent var(--radius), rgba(0,0,0,.5) calc(var(--radius) + 30%), rgba(0,0,0,.5) 0), url('https://638183.freep.cn/638183/t24/jpg/strike.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      cursor: pointer;
      z-index: 1;
      --radius: 0%;
}

</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1418092894" autoplay loop></audio>

<script>
(function (){
      var step = 10, rad = 0, raf = null;
      var render = () => {
                rad += step;
                if(rad <= 0 || rad >= 100) step = -step;
                papa.style.setProperty('--radius', rad + '%');
                if(!aud.paused) raf = requestAnimationFrame(render);
      };
      var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('playing', mState, false);
      papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-1-24 20:41

实现原理

帖子主元素双背景：径向渐变 + 图片。

其中，径向渐变放前面，属顶层背景，可见；图片背景放在后面，被径向渐变背景覆盖。但由于径向渐变使用透明和部分透明色，图片会依稀可见，然后，CSS变量 --radius 借助 requestAnimationFrame 定时器在音乐播放时不断来回变化，营造出闪烁灯效果，图片背景随音乐以律动形态呈现。

马黑黑 发表于 2024-1-24 20:44

这个帖子代码极简，可以学习套用，从中能学习、体验多背景控制技巧。我坐这个帖子用了两只烟的功夫，希望大家不要抽一包烟才能做好{:4_170:}

朵拉 发表于 2024-1-24 20:57

沙发，首席欣赏{:4_204:}

马黑黑 发表于 2024-1-24 21:00

朵拉 发表于 2024-1-24 20:57
沙发，首席欣赏

{:4_190:}

红影 发表于 2024-1-24 21:45

这个闪烁效果真奇特，只是用定时器改变透明和非透明的占比，就能制作出这样的效果{:4_199:}

红影 发表于 2024-1-24 21:46

马黑黑 发表于 2024-1-24 20:44
这个帖子代码极简，可以学习套用，从中能学习、体验多背景控制技巧。我坐这个帖子用了两只烟的功夫，希望大 ...

如果只是换个图片换的音乐的套用，1分钟就行了啊{:4_173:}

红影 发表于 2024-1-24 21:46

又是一个新效果，学习了{:4_187:}

马黑黑 发表于 2024-1-24 21:48

红影 发表于 2024-1-24 21:46
如果只是换个图片换的音乐的套用，1分钟就行了啊

速度

马黑黑 发表于 2024-1-24 21:48

红影 发表于 2024-1-24 21:46
又是一个新效果，学习了

{:4_190:}

红影 发表于 2024-1-24 22:03

马黑黑 发表于 2024-1-24 21:48
速度

春套用就这样的，不过学不到东西的。

红影 发表于 2024-1-24 22:04

马黑黑 发表于 2024-1-24 21:48


感谢黑黑带来的好帖{:4_187:}

马黑黑 发表于 2024-1-24 22:07

红影 发表于 2024-1-24 22:04
感谢黑黑带来的好帖

这是简简单单的帖子

马黑黑 发表于 2024-1-24 22:07

红影 发表于 2024-1-24 22:03
春套用就这样的，不过学不到东西的。

额。那冬套用呢

红影 发表于 2024-1-24 22:30

马黑黑 发表于 2024-1-24 22:07
这是简简单单的帖子

但是效果很出彩{:4_199:}

红影 发表于 2024-1-24 22:31

马黑黑 发表于 2024-1-24 22:07
额。那冬套用呢

哈哈，是纯套用，打错字了{:4_189:}

马黑黑 发表于 2024-1-24 23:39

红影 发表于 2024-1-24 22:31
哈哈，是纯套用，打错字了

额

马黑黑 发表于 2024-1-24 23:39

红影 发表于 2024-1-24 22:30
但是效果很出彩

一般般

红影 发表于 2024-1-25 22:44

马黑黑 发表于 2024-1-24 23:39
额

那就算冬套用吧{:4_173:}

查看完整版本: strike