朵拉 发表于 2025-2-17 21:16

【朵の涂画】日落大道

<style>
#tz {
        margin: 30px 0px 30px calc(50% - 881px);
        width: 1600px;
        height: 1000px;
        background: blue url('https://pic1.imgdb.cn/item/67b2fe90d0e0a243d4003690.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 6px rgba(0,0,0,.6);
        position:relative;
}
#player {
        position: absolute;
        bottom: 830px;
        left: calc(50% - 60px);
        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://cccimg.com/view.php/2625f65ef9cab04d656e11ca6cd1e011.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>

朵拉 发表于 2025-2-17 21:17

学生手机制图，望论坛老师多点评{:4_190:}

朵拉 发表于 2025-2-17 21:17

每当黄昏阳光把所有都渲染
你看那金黄多耀眼

红影 发表于 2025-2-17 23:09

制作漂亮。欣赏朵宝好帖{:4_187:}

庶民 发表于 2025-2-18 08:12

欣赏美好。

梦江南 发表于 2025-2-18 11:22

手机制图制作真漂亮！{:4_199:}
页: [1]
查看完整版本: 【朵の涂画】日落大道