论坛 › 音乐沙龙 › dolan kuyi 刀郎曲

马黑黑 发表于 2024-2-4 11:23

dolan kuyi 刀郎曲

本帖最后由 马黑黑 于 2024-2-4 11:27 编辑 <br /><br /><style>
#papa {
        margin: -70px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 675px;
        background:
                url('https://638183.freep.cn/638183/t24/jpg/dolan.jpg') no-repeat center/cover,
                url('https://638183.freep.cn/638183/small/dolan.png') repeat-x 0 100%;
        background-blend-mode: color-burn;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        display: grid;
        place-items: center;
        z-index: 1;
}
#papa::after {
        position: absolute;
        content: '';
        inset: 0;
        background: rgba(0,0,0,.5);
        opacity: 0;
        pointer-events: none;
        animation: flash .1s infinite alternate var(--state);
}
.btnplay {
        position: absolute;
        cursor: pointer;
        animation: rot 5s linear infinite var(--state);
}
.btnplay:nth-of-type(2) {
        top: 2px;
        width: 120px;
        filter: invert(.8);
        animation-delay: -.6s;
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { opacity: .5; } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1465729863" loop autoplay></audio>
        <img class="btnplay" src="https://638183.freep.cn/638183/small/4yc.png" alt="" title="播放/暂停" />
        <img class="btnplay" src="https://638183.freep.cn/638183/small/4yc.png" alt="" title="播放/暂停" />
</div>

<script>
var btns = document.querySelectorAll('.btnplay');
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 发表于 2024-2-4 11:23

本帖最后由 马黑黑 于 2024-2-4 11:26 编辑

代码
<style>
#papa {
      margin: 0 0 0 calc(50% - 681px);
      width: 1200px;
      height: 675px;
      background:
                url('https://638183.freep.cn/638183/t24/jpg/dolan.jpg') no-repeat center/cover,
                url('https://638183.freep.cn/638183/small/dolan.png') repeat-x 0 100%;
      background-blend-mode: color-burn;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      display: grid;
      place-items: center;
      z-index: 1;
}
#papa::after {
      position: absolute;
      content: '';
      inset: 0;
      background: rgba(0,0,0,.5);
      opacity: 0;
      pointer-events: none;
      animation: flash .1s infinite alternate var(--state);
}
.btnplay {
      position: absolute;
      cursor: pointer;
      animation: rot 5s linear infinite var(--state);
}
.btnplay:nth-of-type(2) {
      top: 2px;
      width: 120px;
      filter: invert(.8);
      animation-delay: -.6s;
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { opacity: .5; } }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1465729863" loop autoplay></audio>
      <img class="btnplay" src="https://638183.freep.cn/638183/small/4yc.png" alt="" title="播放/暂停" />
      <img class="btnplay" src="https://638183.freep.cn/638183/small/4yc.png" alt="" title="播放/暂停" />
</div>

<script>
var btns = document.querySelectorAll('.btnplay');
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

马黑黑 发表于 2024-2-4 11:28

此刀郎曲，和歌手刀郎，没有任何联系哈

红影 发表于 2024-2-4 11:43

这乐曲好听，很有异域风情的味道。背景的制作和闪烁也漂亮{:4_199:}

红影 发表于 2024-2-4 11:43

这个小图的排布漂亮，简单地用个repeat-x 0 100%;就能让它们横排了{:4_199:}

红影 发表于 2024-2-4 11:47

这背景有趣，让闪烁仿佛有灯光效果一般。音乐还挺长的，听到现在呢{:4_173:}

红影 发表于 2024-2-4 11:49

按钮的选择和设计，也和背景十分贴合。这个帖子制作真美{:4_199:}

马黑黑 发表于 2024-2-4 12:04

红影 发表于 2024-2-4 11:43
这个小图的排布漂亮，简单地用个repeat-x 0 100%;就能让它们横排了

定位到底部，横向复制

马黑黑 发表于 2024-2-4 12:04

红影 发表于 2024-2-4 11:49
按钮的选择和设计，也和背景十分贴合。这个帖子制作真美

底图漂亮

马黑黑 发表于 2024-2-4 12:05

红影 发表于 2024-2-4 11:43
这乐曲好听，很有异域风情的味道。背景的制作和闪烁也漂亮

开春了，来点春的气息

小辣椒 发表于 2024-2-4 19:25

这个画面用了二个按钮可以联动的

小辣椒 发表于 2024-2-4 19:26

还有光感效果，下面的小人儿出彩，漂亮

小辣椒 发表于 2024-2-4 19:26

谢谢黑黑的精彩教程分享{:4_187:}

亦是金 发表于 2024-2-4 19:30

欣赏美帖。学习了！{:4_180:}

樵歌 发表于 2024-2-4 20:25

越做越具有创造性鸟！牛叉！

樵歌 发表于 2024-2-4 20:27

打击乐特别有新疆味儿{:4_174:}

红影 发表于 2024-2-4 20:32

马黑黑 发表于 2024-2-4 12:04
定位到底部，横向复制

还可以再左一点，那个弹琴的人不见了{:4_173:}

红影 发表于 2024-2-4 20:33

马黑黑 发表于 2024-2-4 12:04
底图漂亮

底图本就是你选的。黑黑的审美一流{:4_187:}

红影 发表于 2024-2-4 20:34

马黑黑 发表于 2024-2-4 12:05
开春了，来点春的气息

是啊，看看这样的帖子，心情美美{:4_199:}

马黑黑 发表于 2024-2-4 21:32

红影 发表于 2024-2-4 20:34
是啊，看看这样的帖子，心情美美

没有想到要修炼吧{:4_170:}

查看完整版本: dolan kuyi 刀郎曲