|
|

楼主 |
发表于 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>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|