原创代码分享:
<style>
.stage {
position: relative;
width: 1300px;
height: 533px;
background: #000 url('https://638183.freep.cn/638183/Pic/2022/jz.gif') no-repeat center/cover;
filter: blur(1px);
cursor: pointer;
}
.stage::before {
content:attr(data-1);
position: absolute;
right: 10px;
top: 10px;
font: 900 3em/1em Sans-seirf;
color: green;
text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
.light {
position: absolute;
bottom: 0;
width: 0px;
height: 0px;
border: 12px solid;
border-color: transparent green transparent transparent;
filter: blur(1px);
opacity: .6;
transition: .5s;
transform-origin: 50% 0;
transform: scale(80,1.2);
animation: rot 8s ease infinite alternate;
}
#ufo {
filter: blur(.5px);
width: 205px; height: 124px;
animation: fly 10s ease-in-out infinite alternate;
}
@keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
@keyframes rot {
to { transform: rotate(-80deg) scale(30,2.5); }
}
</style>
<div class="stage" data-1="邓典·极光">
<div class="light"></div>
<img alt="" id="ufo" src="https://638183.freep.cn/638183/Pic/2022/feidie.gif" width="205" height="124" />
</div>
<script>
let stage = document.querySelector('.stage');
let aud = document.createElement('audio');
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/02/03/38347358be2cf96dcdef7480b313b9c6.mp3';
aud.autoplay = true;
aud.loop = true;
stage.appendChild(aud);
stage.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>
|