南无月 发表于 2023-5-28 20:14

【作业贴】童年的歌谣（学习黑师汉字落下效果）

<style>#papa {
                margin: -80px 0 0 calc(50% - 593px);
                width: 1024px;
                height: 640px;
                background:
                url('https://s1.ax1x.com/2023/05/20/p94cc24.jpg') no-repeat center/cover,
                #000 url('https://pic1.imgdb.cn/item/644539570d2dde57770c241e.gif') no-repeat center;
      background-blend-mode: screen;
                box-shadow: 0 0 8px #000;
                display: grid;
                place-items: center;
                position: relative;
                overflow: hidden;
                --state: paused;
        }
        css-doodle { position: absolute; }</style><div id="papa"><!-- 播放器 --><css-doodle grid="1" id="mplayer">:doodle { @size: 60px; cursor: pointer; left: 480px; bottom: 290px; z-index: 4; }clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t););background: MediumPurple;animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); }}</css-doodle><css-doodle grid="5x1" click-to-update="">:doodle { @size: 650px 600px; top:100px;}@size: 120px;@shape: circle;background: linear-gradient(to bottom,#9370DB 0%,#e9dfd1 100%);font: normal 30px / 30px sans-serif;:after { content: @pn([童年的歌谣]);font-family: '楷体', '黑体', sans-serif;font-size: 6rem;color: #2F4F4F;    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; font-weight: 900;         letter-spacing: -2px;               }animation: fall 1s calc((@i - 1) * 1s) linear forwards var(--state);@keyframes fall {from { transform: translateY(0); }to { transform: translateY(360px); }}</css-doodle><css-doodle>:doodle {@grid: 16 / 1024px 640px;perspective: 800px;}:container {transform-style: preserve-3d;}@size: @r(3,6)px;border-radius: 50%;@place: center center;background: rgba(@m3(@r(255)),@r(.6, .9));transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);animation: fly @r(20,40)s @r(-20,0)s infinite linear var(--state);@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }</css-doodle></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1293904905" autoplay="autoplay" loop="loop"></audio><script>(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script>

南无月 发表于 2023-5-28 20:19

@马黑黑 交份作业，完成任务{:4_187:}

亦是金 发表于 2023-5-28 20:19

美！好帖！欣赏收藏学习了！{:4_187:}

南无月 发表于 2023-5-28 20:19

亦是金 发表于 2023-5-28 20:19
美！好帖！欣赏收藏学习了！

感谢支持鼓励{:4_187:}

红影 发表于 2023-5-28 20:36

这个带彩色粒子和播放器按钮后漂亮的动图，文字背景也设置得很漂亮。月儿好棒{:4_199:}

红影 发表于 2023-5-28 20:42

歌曲很童趣。月儿躺在吊床上听儿歌，好自在{:4_173:}

醉美水芙蓉 发表于 2023-5-28 20:45

马黑黑 发表于 2023-5-28 21:30

注意用眼卫生哈{:4_170:}

梦缘 发表于 2023-5-29 10:58

太好看了，感谢老师的精彩分享，欣赏点赞！{:4_180:}

南无月 发表于 2023-5-29 18:09

红影 发表于 2023-5-28 20:36
这个带彩色粒子和播放器按钮后漂亮的动图，文字背景也设置得很漂亮。月儿好棒

作业练习各种叠加，新手的没啥看头{:4_173:}

南无月 发表于 2023-5-29 18:09

红影 发表于 2023-5-28 20:42
歌曲很童趣。月儿躺在吊床上听儿歌，好自在

童谣耐听

南无月 发表于 2023-5-29 18:10

醉美水芙蓉 发表于 2023-5-28 20:45
月儿好棒！制作漂亮，动图漂亮！

谢谢水芙蓉支持鼓励{:4_187:}

南无月 发表于 2023-5-29 18:10

马黑黑 发表于 2023-5-28 21:30
注意用眼卫生哈

这么快就发现了，这不科学。没滴眼药水还好{:4_170:}

南无月 发表于 2023-5-29 18:11

梦缘 发表于 2023-5-29 10:58
太好看了，感谢老师的精彩分享，欣赏点赞！

谢谢梦缘支持鼓励{:4_187:}

马黑黑 发表于 2023-5-29 18:13

南无月 发表于 2023-5-29 18:10
这么快就发现了，这不科学。没滴眼药水还好

该滴则滴，滴滴舒心

马黑黑 发表于 2023-5-29 19:38

又看一遍，感觉越看越美

南无月 发表于 2023-5-29 20:12

马黑黑 发表于 2023-5-29 19:38
又看一遍，感觉越看越美

{:4_173:}美滋滋是这么来的

南无月 发表于 2023-5-29 20:14

马黑黑 发表于 2023-5-29 18:13
该滴则滴，滴滴舒心

切。。。。{:4_173:}

马黑黑 发表于 2023-5-29 20:21

南无月 发表于 2023-5-29 20:14
切。。。。

切是 @鱼儿 的专属工作

马黑黑 发表于 2023-5-29 20:22

南无月 发表于 2023-5-29 20:12
美滋滋是这么来的

貌似如此
页: [1] 2 3 4 5
查看完整版本: 【作业贴】童年的歌谣（学习黑师汉字落下效果）