请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
<style>
#papa {
margin: 100px auto;
width: 1200px;
height: 675px;
background: lightgreen url('https://638183.freep.cn/638183/t24/jpg/22u.jpeg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
}
#papa > img {
position: absolute;
transform: translate(700px, -50px) rotate(-45deg);
width: 80px;
filter: hue-rotate(90deg);
animation: fly 10s linear infinite var(--state);
}
#papa > img:nth-of-type(2) {
filter: hue-rotate(180deg);
animation-delay: -5s;
}
#iplay {
position: absolute;
bottom: 15px;
left: calc(50% - 90px);
width: 180px;
height: 180px;
border-style: dotted double ridge;
border-color: orange red;
border-width: 20px;
border-radius: 50%;
outline: 10px double olive;
outline-offset: 2px;
animation: flash .4s linear infinite alternate var(--state);
cursor: pointer;
}
#iplay::before {
position: absolute;
content: '';
inset: -10px;
border-radius: 50%;
background: url('https://638183.freep.cn/638183/small/retina.jpg') no-repeat center/cover;
z-index: -1;
animation: rotating 10s linear infinite var(--state);
}
@keyframes flash { to { border-color: red orange; outline-color: green; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2428512" autoplay loop></audio>
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<div id="iplay"></div>
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
|