梦里水乡（致七·一）

马黑黑 · 发表于 2023-7-1 09:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-7-1 09:03

帖子代码

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #000 url('https://638183.freep.cn/638183/t23/2/uvxl.jpg') 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('https://638183.freep.cn/638183/t23/2/boat.jpg') 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=1989498828" 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 = [item,lPos,tPos,ww];
stars.push(ar);
papa.appendChild(item);
});
let move = () => {
if(canMove) {
stars.forEach((item,key) => {
item[1] += lSteps[key];
item[2] += tSteps[key];
if(item[1] > papa.offsetWidth - item[3] || item[1] < 0) lSteps[key] = -lSteps[key];
if(item[2] > papa.offsetHeight / 3 - item[3] || item[2] < 0) tSteps[key] = -tSteps[key];
item[0].style.left = item[1] + 'px';
item[0].style.top = item[2] + '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>