朵拉 发表于 2024-10-17 19:20

有何不可（学习马黑黑逃离效果）

本帖最后由 朵拉 于 2024-10-27 23:05 编辑 <br /><br /><style>
#tz {
        margin: 30px 0px 30px calc(50% - 721px);
        width: 1280px;
        height: 600px;
        background: blue url('https://pic.imgdb.cn/item/6710f19cd29ded1a8c329ec8.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 6px rgba(0,0,0,.6);
        position:relative;
}
#player {
        position: absolute;
        bottom: 480px;
        left: calc(50% - 50px);
        animation: rot 8s linear infinite var(--state);
}
.waves {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
}
.wavegroup > use {
        animation: waving 25s cubic-bezier(.55,.5,.45,.5) infinite var(--state);
}
.wavegroup > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
}
.wavegroup > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
}
.wavegroup > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
}
.wavegroup > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 30s;
}
@keyframes waving {
        0% { transform: translate3d(-90px,0,0); }
        100% { transform: translate3d(85px,0,0); }
}
@keyframes rot {
        to { transform: rotate(360deg); filter: hue-rotate(360deg); }
}
</style>

<div id="tz">
        <audio id="aud" src="https://www.kumeiwp.com/wj/143690/2023/04/03/7e7bc015a39b4696d9467390142a3682.mp3" autoplay="" loop=""></audio>
       
        <svg class="waves" viewBox="0 24 150 28" xmlns="http://www.w3.org/2000/svg">
                <defs>
                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="wavegroup">
                        <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4" />
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.3)" />
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.1" />
                </g>
        </svg>
        <img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" atl="" title="play" />
</div>

<script>
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        player.title = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-10-17 19:22

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

红影 发表于 2024-10-17 20:06

漂亮，欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2024-10-17 20:48

朵拉晚上好，我画面点击了好久音乐出来了，{:4_173:}

小辣椒 发表于 2024-10-17 20:51

你这个播放器按钮我没有看见图片，不晓得是不是我浏览器问题






梦油 发表于 2024-10-18 09:02

欣赏佳作，问候朵拉。

梦江南 发表于 2024-10-18 09:34

欣赏老师佳作！{:4_204:}

马黑黑 发表于 2024-10-18 18:20

厉害
页: [1]
查看完整版本: 有何不可（学习马黑黑逃离效果）