Things You Said（马黑黑原创）
本帖最后由 朵拉 于 2024-2-14 20:25 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 681px);
width: 1200px;
height: 675px;
background: lightgreen url('https://pic.imgdb.cn/item/65ccaced9f345e8d03e8f44e.jpg') 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/mufuz2.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=2126393152" 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> @马黑黑
马师 晚上好，大年初五迎财神~~
学生交作业，请指正哈~~{:4_190:} {:4_199:}
页:
[1]