【画笔似有马良功】中秋国庆快乐
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1919335">
<style>
#papa { margin: 0 0 0 calc(50% - 523px); width: 1024px; height: 740px; background: #000 url('https://t7.baidu.com/it/u=985167753,3720678230&fm=193&f=GIF') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --state: paused; }
#papa::before { position: absolute; left: calc(50% - 30px); bottom: 20px; content: ''; width: 60px; height: 60px; background: radial-gradient(darkred,red); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); cursor: pointer; animation: rot 6s infinite linear var(--state); }
.lizi { display: block; position: absolute; width: 20px; height: 20px; background: white; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.boat { position: absolute; left: 0; top: 210px; width: 100px; height: 100px; background: url('http://bohann.net/data/attachment/forum/202307/25/091331jdqpbpw4zrjgzbqr.gif') no-repeat center/cover; offset-path: path('M0,420 Q400,200 800,170'); offset-distance: 100%; mix-blend-mode: multiply; animation: boating 20s var(--delay) infinite linear var(--state); --delay: 0s; }
.boat:nth-of-type(2) { --delay: -7s; }
.boat:nth-of-type(3) { --delay: -14s; }
svg {position: absolute; left: 0; top:200px; border: 1px solid tan;}
@keyframes boating { to { offset-distance: 0%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div class="boat"></div>
<div class="boat"></div>
<div class="boat"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1865897718.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let stars = [], total = 30, canMove = false;
let lSteps = Array.from({length: total}, (v) => Math.random() * 1.5 - .6);
let tSteps = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'lizi';
let ww = 10 + Math.round(Math.random() * 20),
lPos = Math.round(Math.random() * (papa.offsetWidth - ww)),
tPos = Math.round(Math.random() * (papa.offsetHeight / 3 - ww));
item.style.cssText += `
left: ${lPos}px;
top: ${tPos}px;
width: ${ww}px;
height: ${ww}px;
background: rgba(${200 + Math.floor(Math.random() * 55)},0,0,.7);
animation: rot 4s infinite linear var(--state);
`;
let ar = ;
stars.push(ar);
papa.appendChild(item);
});
let move = () => {
if(canMove) {
stars.forEach((item,key) => {
item += lSteps;
item += tSteps;
if(item > papa.offsetWidth - item || item < 0) lSteps = -lSteps;
if(item > papa.offsetHeight / 3 - item || item < 0) tSteps = -tSteps;
item.style.left = item + 'px';
item.style.top = item + 'px';
});
}
setTimeout(move,17);
};
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),canMove = false) : (papa.style.setProperty('--state','running'),canMove = true);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
move();
})();
</script>
</td></tr></table> 小白兔好可爱，开心这图抹的很喜庆
非常欢快的旋律，小兔子白了又白，这动画里的猫头鹰自我陶醉的{:9001:} 很欢快的哦！{:9001:}
页:
[1]