紫气东来
<style>#papa {
margin: 130px 0 30px calc(50% - 790px);
width: 1400px;
height: 750px;
background: url('https://pic.imgdb.cn/item/66ab97d2d9c307b7e9734c2d.jpg') no-repeat center/cover;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.5);
position: relative;
}
#btnFs {
position: absolute;
left: 20px;
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
}
#player {
position: absolute;
bottom: 5px;
right:18px;
width: 120px;
height: 120px;
border: 3px solid orange;
border-radius: 50%;
cursor: pointer;
transform: rotateX(60deg);
--tt: 6s;
}
#player::before, #player::after {
position: absolute;
content: '';
border: inherit;
border-radius: inherit;
animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
inset: 20px;
border-color: transparent gold;
}
#player::after {
inset: 40px;
border-width: 12px;
border-style: dashed;
--tt: 4s;
}
@keyframes rot { to { transform: rotate(360deg); } }
#player:hover { filter: drop-shadow(0 0 50px fuchsia); }
#vid1 {
position: absolute;
right:-10px;
bottom:-15px;
width: 180px;
height:260px;
opacity: 0.8;
border-radius: 50%;
mix-blend-mode: screen;
transform: rotateY(60deg);
-webkit-mask: radial-gradient(circle,silver,transparent,transparent);
}
#vid2 {
position: absolute;
left:0px
top:-120px;
width: 130%;
height:150%;
object-fit: cover;
pointer-events: none;
mix-blend-mode:soft-light;
opacity: 0.8;
}
#vid3 {
position: absolute;
right:-120px;
bottom:-120px;
width: 100%;
height:40%;
object-fit: cover;
pointer-events: none;
opacity: 0.8;
mix-blend-mode:screen;
z-index: 1;
}
#vid4 {
position: absolute;
top:-80px;
left:0px
width: 100%;
height:120%;
object-fit: cover;
pointer-events: none;
opacity:0.8;
mix-blend-mode:screen;
}
.my-words span {
position: relative;
animation: my-words 1.5s infinite var(--state);
}
.my-words span:nth-child(1n) {
animation-delay: 0.2s;
}
.my-words span:nth-child(2n) {
animation-delay: 0.4s;
}
.my-words span:nth-child(3n) {
animation-delay: 0.25s;
}
.my-words span:nth-child(4n) {
animation-delay: 0.35s;
}
h3 {
margin: 150px auto;
padding: 5px;
letter-spacing: 20px;
text-align: center;
font-weight: 580;
text-transform: uppercase;
column-count:1;
font-size: 7rem;
font-family:Microsoft YaHei;
line-height:38px;
color:#E6E6FA;
-webkit-background-clip:text;
text-shadow: 0px 0px 10px red,-10px -10px 10px #00FF00;
}
h3 span:nth-child(1n) {
color:#9932CC;
}
h3 span:nth-child(2n) {
color:#FFD700;
}
h3 span:nth-child(3n) {
color:#FF1493;
}
h3 span:nth-child(4n) {
color:#ADFF2F;
}
@keyframes my-words {
0% {
top: 0;
}
50% {
top: -15px;
}
100% {
top: 0;
}
}
</style>
<div id="papa">
<span id="btnFs"></span>
<video id="vid1" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d21b610e8f58.mp4" autoplay loop muted></video>
<video id="vid2" src="https://video.699pic.com/videos/08/39/95/b_AhjCDc0FWt281561083995_10s.mp4" autoplay loop muted></video>
<video id="vid3" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8f4ab37a1.mp4" autoplay loop muted></video>
<video id="vid4" src="https://img.tukuppt.com/video_show/2422006/00/01/63/5b480d44a9c85.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=132675" autoplay loop></audio>
<h3 class="my-words span"><span>紫</span><span>气</span><span>东</span><span>来</span></h3>
<div id="player"></div></div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
player.title = aud.paused ? '播放' : '暂停';
aud.paused ?(vid1.pause(),vid2.pause(),vid3.pause(),vid4.pause()) :(vid1.play(), vid2.play(),vid3.play(),vid4.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
做得不错！挺漂亮的！
页:
[1]