论坛 › 欢乐水吧 › 梦里水乡（致七·一）

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

梦里水乡（致七·一）

<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 = ;
                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>

马黑黑 发表于 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 = ;
                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>

马黑黑 发表于 2023-7-1 09:06

本帖粒子效果（上方五角星的动态展现）使用自己编写的JS实现，不依赖任何第三方组件。

粒子效果的CSS和JS代码略作修改即可是另外的形态，运动形式、运动范围等都可以重新定制。

花飞飞 发表于 2023-7-1 11:30

马黑黑 发表于 2023-7-1 09:06
本帖粒子效果（上方五角星的动态展现）使用自己编写的JS实现，不依赖任何第三方组件。

粒子效果的CSS和J ...

{:4_199:}原来如此，怪不得找了半天没瞧见JS组件....

花飞飞 发表于 2023-7-1 11:31

红星闪闪放光芒，致敬伟 大的七一{:4_187:}

马黑黑 发表于 2023-7-1 11:38

花飞飞 发表于 2023-7-1 11:30
原来如此，怪不得找了半天没瞧见JS组件....

做粒子不一定用组件，用JS做单一功能的就行

马黑黑 发表于 2023-7-1 11:38

花飞飞 发表于 2023-7-1 11:31
红星闪闪放光芒，致敬伟 大的七一

节日好！敬礼！

上海朝阳 发表于 2023-7-1 11:57

哈哈，你这动画给老美看见要慌神了，江南小河里有那么精致的潜艇，要进入海水，声纳要找不到呀{:4_189:}

马黑黑 发表于 2023-7-1 11:59

上海朝阳 发表于 2023-7-1 11:57
哈哈，你这动画给老美看见要慌神了，江南小河里有那么精致的潜艇，要进入海水，声纳要找不到呀

嗯，美国佬是时候瑟瑟发抖了

红影 发表于 2023-7-1 12:15

这个帖子里又好多新东西，那粒子不但能转动，还能移位，厉害{:4_199:}

红影 发表于 2023-7-1 12:17

每次刷新，粒子红星的分布还是不一样的呢。
红星闪闪共同庆祝伟大的党102周年华诞{:4_374:}

冬天的雨 发表于 2023-7-1 12:18

马黑黑 发表于 2023-7-1 09:03
帖子代码

这个有源码分享我去套用试试，不一定成功的

马黑黑 发表于 2023-7-1 12:23

冬天的雨 发表于 2023-7-1 12:18
这个有源码分享我去套用试试，不一定成功的

这个貌似也不难的

冬天的雨 发表于 2023-7-1 12:24

马黑黑 发表于 2023-7-1 12:23
这个貌似也不难的

冬雨笨的

马黑黑 发表于 2023-7-1 12:24

红影 发表于 2023-7-1 12:15
这个帖子里又好多新东西，那粒子不但能转动，还能移位，厉害

转动是CSS关键帧动画，移动是定时器setTimeout递归调用JS自定义函数

马黑黑 发表于 2023-7-1 12:25

红影 发表于 2023-7-1 12:17
每次刷新，粒子红星的分布还是不一样的呢。
红星闪闪共同庆祝伟大的党102周年华诞

节日好！敬礼！礼毕！

马黑黑 发表于 2023-7-1 12:27

冬天的雨 发表于 2023-7-1 12:24
冬雨笨的

{:4_172:}

冬天的雨 发表于 2023-7-1 12:36

马黑黑 发表于 2023-7-1 12:27


完成了{:4_172:}

红影 发表于 2023-7-1 15:03

马黑黑 发表于 2023-7-1 12:24
转动是CSS关键帧动画，移动是定时器setTimeout递归调用JS自定义函数

能同时有两个动作真的是很不容易。

红影 发表于 2023-7-1 15:03

马黑黑 发表于 2023-7-1 12:25
节日好！敬礼！礼毕！

哈哈，这么一本正经的。{:4_189:}

查看完整版本: 梦里水乡（致七·一）