论坛 › 动画音画 › 无人区

马黑黑 发表于 2023-4-2 09:57

无人区

<style>
#papa { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; border: 2px solid tan; border-image: linear-gradient(to left,tan,red,green) 2; background: url('https://638183.freep.cn/638183/t23/webp/hc.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer{ position: absolute; left: 20%; bottom: 0; width: 300px; height: 300px; border: 10px solid lightblue; border-radius: 50%; display: grid; place-items: center; filter:url(#wavy) blur(0.5px); transform: rotateX(-45deg); pointer-events: none; --state: running; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; width: 260px; height: 260px; background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 8s infinite linear var(--state); }
#mplayer::after { width: 100px; height: 100px; bottom: 4px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
        <svg id="svg" width="0" height="0">
                <g><filter id="wavy">
                        <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
                                <animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
                        </feTurbulence>
                        <feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
                </filter></g>
        </svg>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=511181532" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
(function() {
        let mState = () => aud.paused ? (mplayer.style.setProperty('--state','paused'), svg.pauseAnimations()) : (mplayer.style.setProperty('--state','running'), svg.unpauseAnimations());//mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play',mState,false);
        aud.addEventListener('pause',mState,false);
        mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

马黑黑 发表于 2023-4-2 10:00

代码
<style>
#papa {
        margin: auto;
        width: 1024px;
        height: 640px;
        border: 2px solid tan;
        border-image: linear-gradient(to left,tan,red,green) 2;
        background: url('https://638183.freep.cn/638183/t23/webp/hc.webp') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#mplayer{
        position: absolute;
        left: 20%;
        bottom: 0;
        width: 300px;
        height: 300px;
        border: 10px solid lightblue;
        border-radius: 50%;
        display: grid;
        place-items: center;
        filter:url(#wavy) blur(0.5px);
        transform: rotateX(-45deg);
        pointer-events: none;
        --state: running;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        width: 260px;
        height: 260px;
        background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') center/cover no-repeat;
        cursor: pointer;
        pointer-events: auto;
        animation: rot 8s infinite linear var(--state);
}
#mplayer::after { width: 100px; height: 100px; bottom: 4px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
        <svg id="svg" width="0" height="0">
                <g><filter id="wavy">
                        <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
                                <animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
                        </feTurbulence>
                        <feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
                </filter></g>
        </svg>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=511181532" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--state','paused'), svg.pauseAnimations()) : (mplayer.style.setProperty('--state','running'), svg.unpauseAnimations());//mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play',mState,false);
aud.addEventListener('pause',mState,false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

亦是金 发表于 2023-4-2 11:25

黑黑老师制作神速！{:4_178:}

马黑黑 发表于 2023-4-2 11:27

亦是金 发表于 2023-4-2 11:25
黑黑老师制作神速！

感谢支持

雨中悄然 发表于 2023-4-2 12:17

水中花挺好的，为啥叫无人区{:4_173:}

雨中悄然 发表于 2023-4-2 12:17

比想象中的更漂亮

樵歌 发表于 2023-4-2 12:38

那桃花是妖精{:4_203:}

马黑黑 发表于 2023-4-2 12:39

樵歌 发表于 2023-4-2 12:38
那桃花是妖精

或许，不然就木有桃花运的说法{:5_106:}

马黑黑 发表于 2023-4-2 12:40

雨中悄然 发表于 2023-4-2 12:17
水中花挺好的，为啥叫无人区

若有人，风景不会这么美。这也是拍自无人区的风景。

马黑黑 发表于 2023-4-2 12:41

雨中悄然 发表于 2023-4-2 12:17
比想象中的更漂亮

还不算是很丑

雨中悄然 发表于 2023-4-2 12:48

马黑黑 发表于 2023-4-2 12:40
若有人，风景不会这么美。这也是拍自无人区的风景。

这么说就明白了，无人区风景独好{:4_199:}

雨中悄然 发表于 2023-4-2 12:49

马黑黑 发表于 2023-4-2 12:41
还不算是很丑

这效果看得心都要融化了，绝美{:4_170:}

梦油 发表于 2023-4-2 14:37

太妙了，这个播放器又推陈出新啦！

小辣椒 发表于 2023-4-2 16:04

我是在找黑黑今天有发了什么新东东，看见悄然一下子发3个帖，我蒙了一下，黑黑的新帖肯定有{:4_170:}

小辣椒 发表于 2023-4-2 16:04

这朵水中浪花出来了{:4_199:}

小辣椒 发表于 2023-4-2 16:06

很美的效果，小辣椒晚上去套一个作业{:4_171:}

马黑黑 发表于 2023-4-2 16:14

小辣椒 发表于 2023-4-2 16:06
很美的效果，小辣椒晚上去套一个作业

你要注意 #mplayer 选择器中的 transform 语句，里面的 rotateX(...deg) 是为了让外圈躺在水面，如果不需要这个操作，可以去掉，如果需要，注意修改里面的角度值。

马黑黑 发表于 2023-4-2 16:21

雨中悄然 发表于 2023-4-2 12:49
这效果看得心都要融化了，绝美

我以为你要说绝丑{:4_189:}

马黑黑 发表于 2023-4-2 16:22

小辣椒 发表于 2023-4-2 16:04
这朵水中浪花出来了

溶蚀的效果

马黑黑 发表于 2023-4-2 16:22

雨中悄然 发表于 2023-4-2 12:48
这么说就明白了，无人区风景独好

对，风景这边独好

查看完整版本: 无人区