|
|

楼主 |
发表于 2023-12-24 11:43
|
显示全部楼层
本帖主要尝试:① mix-blend-mode ;② requestAnimationFrame 驱动的实体HTML粒子。代码:
- <style>
- #papa {
- margin: 0 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- box-shadow: 4px 8px 28px gray;
- background: url('https://638183.freep.cn/638183/t23/webp2/fgyy_133478620283196250.webp') no-repeat center/cover;
- display: grid;
- place-items: center;
- position: relative;
- pointer-events: none;
- --state: paused;
- }
- #papa::before, #papa::after {
- position: absolute;
- content: url('https://638183.freep.cn/638183/t23/btn/btnfy1.webp');
- top: 10px;
- mix-blend-mode: luminosity;
- animation: rotating 10s infinite linear var(--state);
- cursor: pointer;
- pointer-events: auto;
- }
- #papa::before {
- left: 10px;
- }
- #papa::after {
- right: 10px;
- mix-blend-mode: lighten;
- }
- li-zi {
- position: absolute;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- opacity: .8;
- }
- #btnplay {
- position: absolute;
- top: 10px;
- mix-blend-mode: exclusion;
- animation: rotating 5s infinite linear var(--state);
- cursor: pointer;
- pointer-events: auto;
- }
- @keyframes rotating { to { transform: rotate(360deg); } }
- </style>
- <div id="papa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=201883" autoplay loop></audio>
- <img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/btnfy1.webp" alt="" title="播放/暂停"/>
- </div>
- <script>
- let total = 60, lzAr = [], aniTimer = null;
- Array.from({length: total}).forEach((item,key) => {
- let lz = document.createElement('li-zi');
- let xx = Math.random() * (papa.offsetWidth - 20),
- yy = Math.random() * (papa.offsetHeight - 20),
- stepX = 1 - Math.random() * 2,
- stepY = 1 - Math.random() * 2;
- lz.style.cssText += `
- left: ${xx}px;
- top: ${yy}px;
- background: #${Math.random().toString(16).substr(-6)};
- `;
- papa.insertBefore(lz,btnplay);
- lzAr.push([lz,xx,yy,stepX,stepY]);
- });
- let render = () => {
- lzAr.forEach((lz,key) => {
- lzAr[key][1] += lzAr[key][3];
- if(lzAr[key][1] < 0 || lzAr[key][1] > papa.offsetWidth - 20) lzAr[key][3] = -lzAr[key][3];
- lzAr[key][2] += lzAr[key][4];
- if(lzAr[key][2] < 0 || lzAr[key][2] > papa.offsetHeight - 20) lzAr[key][4] = -lzAr[key][4];
- lzAr[key][0].style.left = lzAr[key][1] + 'px';
- lzAr[key][0].style.top = lzAr[key][2] + 'px';
- });
- aniTimer = aud.paused ? cancelAnimationFrame(aniTimer) : requestAnimationFrame(render);
- };
- let mState = () => {
- papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- render();
- };
- aud.addEventListener('playing', mState, false);
- aud.addEventListener('pause', mState, false);
- papa.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|