《一条绳俩蚂蚱》 - 高信&郭玲
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_553390">
<style>
#papa {
margin: 100px -200px ;
width: 1220px;
height: 720px;
background: url('') no-repeat center/cover;
position: relative;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
border-radius: 3%;
border: thick double#74a6f9;
}
.vid {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: ;
}
.vid1 {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .9;
mix-blend-mode: lighten;/*mix-blend-mode: screen; 滤色*/
}
.emoji {z-index: 1;
position: absolute;
width: 30px;
height: 30px;
top: -50px;
opacity:.8;
left: 52%;
font: normal 2em/0em serif;
color: #f964e9;/*color: #f5680a;*/
animation: drop 10s var(--delay) infinite linear var(--state);
--delay: 0s;
}
.emoji:nth-of-type(2) { --delay: -2s;left: 22%;color: #ff0000;transform:rotate(0deg)scale(1)translate(40%,0%); }
.emoji:nth-of-type(3) { --delay: -4s;left: 12%;color: #ffffff;transform:rotate(0deg)scale(1)translate(40%,0%); }
.emoji:nth-of-type(4) { --delay: -6s; }
.emoji:nth-of-type(5) { --delay: -3s;left: 70%; transform:rotate(150deg)scale(1)translate(-50%,0%);}
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height);} }
@keyframes drop { to { transform: rotate(-20deg) translateY(600px); } }
#mplayer {
top: 620px;
left: 150px;
width: 80px;
height: 80px;;
filter: drop-shadow(0 0 8px yellow);
cursor: pointer;
animation: turn 6s linear infinite var(--state);
position: absolute;
}
@keyframes turn { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://cccimg.com/view.php/51b078cbdefde08d3e4ec099f32bd9e0.mp3" autoplay loop></audio>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/44/V-174484-1CF6B591.mp4" loop muted></video>
<video class="vid1" src="https://video-qn.51miz.com/preview/video/00/00/12/79/V-127936-7871EE24.mp4" loop muted ></video>
<span class="emoji">🌸</span>
<span class="emoji">❤</span>
<span class="emoji">💕</span>
<span class="emoji">💘</span>
<span class="emoji">🌺</span>
<img id="mplayer" src="https://www.emojiall.com/images/60/samsung/1f338.png" alt="" />
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://cccimg.com/down.php/f3adc8684d0a444380d203c04e43ee14.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#mplayer',
lrc_css: 'top: 90%;left: 50%; transform: translate(-50%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgb(255, 0, 225,.55)); color: #fff;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: transparent;
--duration: ${Math.random() * 10 + 10}s;
--delay: ${Math.random() *-2}s;
--deg: ${deg}deg;
`;
mplayer.appendChild(item);
size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}
</script>
</td></tr></table> 欣赏了，赞一个，问好老师 制作的很精美，赞
页:
[1]