Beautiful Day TO:空谷幽兰
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1860175"><style>
#papa {
margin: 20px 0 0 calc(50% - 510px);
width: 1024px;
height: 640px;
box-shadow: 3px 3px 20px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#canv {
position: absolute;
display: block;
box-shadow: 3px 3px 20px #000;
position: relative;
cursor: pointer;
z-index: 2;
}
#vid { display: none; }
#mypic {
width: 60px;
height: 60px;
position: absolute;
top: 5px;
right: 24px;
border-radius: 50%;
cursor: pointer;
z-index: 3;
animation: rot 3s infinite linear var(--state);
--state: paused;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=502103677.mp3" autoplay loop></audio>
<video id="vid" src="https://link.hhtjim.com/163/5553004.mp4" autoplay loop muted></video>
<img id="mypic" src="https://pic.imgdb.cn/item/641574b2a682492fcc4bed40.jpg" alt="" />
</div>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
</script><br><br><br><br></table>
视频镶嵌很漂亮！感谢分享！ 欣赏榕哥的作品，幽兰收礼开心哟 榕哥视频嵌入很棒哟 曲曲小清新 望川 发表于 2015-1-14 21:12
视频镶嵌很漂亮！感谢分享！
O(∩_∩)O谢谢欣赏，问好 白雪皑皑 发表于 2015-1-15 09:17
欣赏榕哥的作品，幽兰收礼开心哟
白雪的新衣衣很漂亮 一抹海蓝 发表于 2015-1-15 12:44
榕哥视频嵌入很棒哟
谢谢蓝蓝 平凡 发表于 2015-1-15 18:32
白雪的新衣衣很漂亮
谢谢榕哥，北北给做的
页:
[1]