无人区

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>