论坛 › 欢乐水吧 › 圣诞节快乐~（套个黑黑迷幻效果）

小辣椒 发表于 2022-12-15 01:05

圣诞节快乐~（套个黑黑迷幻效果）

<style>
#papa { margin: 120px 0 0 calc(50% - 723px); width: 1280px; height: 650px; background: gray url('https://yinhua.ru/20221214/002.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; overflow: hidden; perspective: 3000px; z-index: 1; }
#papa::before { position: absolute; content: '圣诞节快乐'; right: 500px; top: 290px; font: bold 3em sans-serif; color: #000; text-shadow: 2px 2px 1px #fff; }
#mama { position: absolute; left: 650px; top: 240px; animation: rot 2s infinite alternate; transform-style: preserve-3d; cursor: pointer; }
#mama::before { position: absolute; content: ''; left: -200px; top: -200px; right: -200px; bottom: -200px;}
.ball { --yy: 200px; position: absolute; width: 1px; height: 1px; background: darkgray; border-radius: 50%; display: grid; place-items: center; opacity: .65; }
@keyframes rot { from { transform: skew(-2deg,-5deg) rotateZ(10deg); } to { transform: skew(2deg,5deg) rotateZ(10deg); } }
</style>

<div id="papa">
        <div id="mama"></div>
        <audio id="aud" src="https://yinhua.ru/20221214/sdjkl.mp3" autoplay></audio>
</div>

<script>
(function() {
        let total = 180, angle = 0, step =1, rAnf;

        for(i=0; i<total; i++) {
                let e = document.createElement('span');
                e.className = 'ball';
                e.style.background = `#${Math.random().toString(16).substr(-6)}`;
                e.style.width = e.style.height = i*0.2 + 1 + 'px';
                e.style.transform = `rotate(${angle/total*i}deg) translate(${i*1.2}px)`;
                mama.appendChild(e);
        }
        let balls = document.querySelectorAll('.ball');

        let render = () => {
                let rand = Math.floor(Math.random()* total);
                angle += step;
                balls.forEach((e,k) => {
                        if(k === rand) e.style.background = `#${Math.random().toString(16).substr(-6)}`;
                        e.style.transform = `rotateZ(${angle/total*k}deg) translateY(${k*1.2}px)`;
                });
                if(angle > 7200 || angle< 0) step = - step;
                if(rAnf > 0) cancelAnimationFrame(rAnf);
                if(!aud.paused) rAnf = requestAnimationFrame(render);
        };

        let mState = () => aud.paused ? (mama.style.animationPlayState = 'paused') : (mama.style.animationPlayState = 'running');
        mama.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => { mState(); rAnf = requestAnimationFrame(render);});
        aud.addEventListener('ended', () => { cancelAnimationFrame(rAnf); aud.play(); });
})();
</script>
<br><br><br><br><br>

小辣椒 发表于 2022-12-15 01:08

明天没有时间玩，今天赶个作业了@马黑黑

小辣椒 发表于 2022-12-15 01:12

师父在玩的时候不让过洋节的，今天是有个大学生要我帮忙做个圣诞节的swf，是大学的作业，我就自己找出了以前的素材，圣诞快乐4个字我在swf软件里面是做的粒子效果，这个动图上没有用的，画面太多东西了，发现会乱了

红影 发表于 2022-12-15 08:09

亲爱的这个构思巧妙，这个效果用在这里十分漂亮，位置也刚刚好{:4_199:}

马黑黑 发表于 2022-12-15 08:10

各元素的配合使用，很好地烘托节日气氛，赞的。

圣诞节是一个宗教节日，用于纪念耶稣。基督教发源于亚洲，古罗马强盛之时兼容性好，允许各类宗教活动的存在，基督教这才在后来的欧洲发展起来，号称救赎人类于苦难的上帝之子耶稣被欧美人供奉。

节日各有其内涵与意义，但我们没有必要热衷于过非本民族的节日。

红影 发表于 2022-12-15 08:10

虽然咱们不过洋节了，但是这个可以送给夕夕，夕夕正好是平安夜那天来的，可以做个纪念{:4_173:}

梦油 发表于 2022-12-15 10:06

嗅到圣诞节的气氛了。

醉美水芙蓉 发表于 2022-12-15 16:48

三月的阳光 发表于 2022-12-15 16:54

提前祝师傅圣诞节快乐~~{:4_199:}{:4_199:}{:4_176:}{:4_176:}

三月的阳光 发表于 2022-12-15 16:56

制作的漂亮，这个代码频谱喜欢~~{:4_199:}{:4_199:}

辫子哥哥 发表于 2022-12-15 19:56

这个圣诞老人帅的{:4_208:}

辫子哥哥 发表于 2022-12-15 19:57

这个不晓得可以套用不？

千羽 发表于 2022-12-15 21:41

小辣椒构思巧妙，慢慢欣赏{:4_187:}

千羽 发表于 2022-12-15 21:44

圣诞节的气氛已经弥漫，好热闹啊{:4_187:}

千羽 发表于 2022-12-15 21:52

问好小辣椒，圣诞节快乐{:4_185:}

小辣椒 发表于 2022-12-16 10:58

千羽 发表于 2022-12-15 21:52
问好小辣椒，圣诞节快乐

千羽好，圣诞节还早呢{:4_189:}

小辣椒 发表于 2022-12-16 10:59

千羽 发表于 2022-12-15 21:44
圣诞节的气氛已经弥漫，好热闹啊

这个图图是废物利用{:4_170:}

帮别人做好没有用了

梦缘 发表于 2022-12-16 15:53

真漂亮的圣诞快乐！{:4_178:}

千羽 发表于 2022-12-16 20:18

小辣椒 发表于 2022-12-16 10:58
千羽好，圣诞节还早呢

就几天了，快了{:4_181:}

小辣椒 发表于 2022-12-16 21:10

千羽 发表于 2022-12-16 20:18
就几天了，快了

千羽晚上好{:4_171:}

查看完整版本: 圣诞节快乐~（套个黑黑迷幻效果）