红影 发表于 2024-7-20 09:37

《心潮起伏》（学习黑黑《游魂飞魄》代码效果）


<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 680px;
        background: url('https://pic.imgdb.cn/item/669a7ff4d9c307b7e94b75e3.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px rgba(0,0,0,.6);
        z-index: 1; border-radius: 20px;
        pointer-events: none;
        display: grid;
        place-items: center;
        position: relative;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        content: '';
        width: 680px;
        height: 120px;
        border-radius: 50% 50% 0 50%;
        transform: rotate(-10deg);
        background: radial-gradient(LightSteelBlue 1px, transparent 0) center / 22px 20px;
        top:350px;
        left:160px;       
        animation: bgchg 6s infinite alternate var(--state);
}
#player { position: absolute; left: 120px; top: 40px; width: 100px; height: 100px; z-index: 2; pointer-events: auto; cursor: pointer; filter: hue-rotate(170deg); opacity: .45;; animation: rot 8s linear infinite var(--state); }
@keyframes bgchg { to { background-size: 40px 44px; filter: hue-rotate(360deg);} }
#mydiv::after { top: 370px; animation-delay: -2s; }
@keyframes rot { to { transform: rotate(-1turn); } }

</style>

<div id="mydiv"><img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/66895d72d9c307b7e9b28032.png" /></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1433148245" autoplay loop></audio>

<script>
var mState = () => {
      mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-7-20 09:38

把两个小播取消了背景，当做起伏用了，看看这样不像播放器了，索性加个额外的播放器@马黑黑 {:4_173:}

红影 发表于 2024-7-20 09:39

周末要外出，赶紧急急忙忙完成个作业。本来都是想趁周末做作业的。

梦江南 发表于 2024-7-20 09:58

问好影子，欣赏点赞！{:4_187:}

马黑黑 发表于 2024-7-20 10:23

红影 发表于 2024-7-20 09:38
把两个小播取消了背景，当做起伏用了，看看这样不像播放器了，索性加个额外的播放器@马黑黑

酱紫也是挺漂亮的

红影 发表于 2024-7-20 10:45

梦江南 发表于 2024-7-20 09:58
问好影子，欣赏点赞！

谢谢梦江南鼓励{:4_187:}

红影 发表于 2024-7-20 10:46

马黑黑 发表于 2024-7-20 10:23
酱紫也是挺漂亮的

是啊，黑黑的代码怎么用都漂亮呢，非常喜欢这个效果{:4_187:}

马黑黑 发表于 2024-7-20 13:12

红影 发表于 2024-7-20 10:46
是啊，黑黑的代码怎么用都漂亮呢，非常喜欢这个效果

{:4_190:}

小辣椒 发表于 2024-7-20 13:54

亲爱的，这个效果好，自己改了，漂亮{:4_199:}

小辣椒 发表于 2024-7-20 13:55

先仔细去看看黑黑的教程，然后抄个作业{:4_173:}

海笑 发表于 2024-7-20 15:21

欣赏老师佳作！

红影 发表于 2024-7-20 17:16

马黑黑 发表于 2024-7-20 13:12


感谢黑黑的代码{:4_187:}

红影 发表于 2024-7-20 17:17

小辣椒 发表于 2024-7-20 13:54
亲爱的，这个效果好，自己改了，漂亮

我把两个伪元素叠加到一起了{:4_173:}

红影 发表于 2024-7-20 17:17

小辣椒 发表于 2024-7-20 13:55
先仔细去看看黑黑的教程，然后抄个作业

看到亲爱的新帖了，非常漂亮，构思很好呢{:4_199:}

红影 发表于 2024-7-20 17:18

海笑 发表于 2024-7-20 15:21
欣赏老师佳作！

问好海笑，感谢鼓励{:4_187:}

马黑黑 发表于 2024-7-20 18:26

红影 发表于 2024-7-20 17:16
感谢黑黑的代码

阔气阔气

红影 发表于 2024-7-21 10:45

马黑黑 发表于 2024-7-20 18:26
阔气阔气

黑黑的代码带来了很多好玩的{:4_187:}

马黑黑 发表于 2024-7-21 10:45

红影 发表于 2024-7-21 10:45
黑黑的代码带来了很多好玩的

现在好像是越玩越是那些简单的

醉美水芙蓉 发表于 2024-7-21 16:54

红影 发表于 2024-7-21 17:01

马黑黑 发表于 2024-7-21 10:45
现在好像是越玩越是那些简单的

效果好就好呢，简单还是复杂，对于玩的人来说倒不在乎，反正可以跟着套用{:4_173:}
页: [1] 2
查看完整版本: 《心潮起伏》（学习黑黑《游魂飞魄》代码效果）