马黑黑 发表于 2023-4-20 13:18

绿叶清舟可以跟这个喇叭谈谈心

<script>
document.write('<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"><\/script>');
</script>

<css-doodle grid="6">
        :doodle {
                @grid: 4 / 260px 200px;
                background: #F6F6F6 url('https://638183.freep.cn/638183/t23/btn/laba.jpg') no-repeat 60px 0px / 200px 200px;
                cursor: pointer;
                --state: running;
        }
        :doodle(:hover) { --state: paused; }
        position: absolute;
        @place-cell: 100px 48%;
        :after {
                content: @p(♫,♪,♩,♬);
                color: @p(red,pink,orange,green,blue);
        }
        animation: fly 1s @r(-2,2)s infinite var(--state);
        @keyframes fly {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-60,60)deg) translate(-120px); }
        }
</css-doodle>

马黑黑 发表于 2023-4-20 13:20

代码
<script>document.write('<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"><\/script>');</script>

<css-doodle>
        :doodle {
                @grid: 4 / 260px 200px;
                background: #F6F6F6 url('https://638183.freep.cn/638183/t23/btn/laba.jpg') no-repeat 60px 0px / 200px 200px;
                cursor: pointer;
                --state: running;
        }
        :doodle(:hover) { --state: paused; }
        position: absolute;
        @place-cell: 100px 48%;
        :after {
                content: @p(♫,♪,♩,♬);
                color: @p(red,pink,orange,green,blue);
        }
        animation: fly 1s @r(-2,2)s infinite var(--state);
        @keyframes fly {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-60,60)deg) translate(-120px); }
        }
</css-doodle>

马黑黑 发表于 2023-4-20 13:21

看完绿叶清舟的帖子，

https://www.huachaowang.com/forum.php?mod=viewthread&tid=68103

就想到弄弄这个

梦油 发表于 2023-4-20 15:16

绝妙的设计，高！

梦缘 发表于 2023-4-20 15:51

精彩的喇叭，感谢分享！{:4_190:}

红影 发表于 2023-4-20 16:06

可以直接弄到那些音符的啊，这个漂亮。{:4_187:} @p 这个是缩写么？呵呵，俺赶紧去复习css-doodle去{:4_173:}

起个网名好难 发表于 2023-4-20 16:58

红影 发表于 2023-4-20 16:06
可以直接弄到那些音符的啊，这个漂亮。 @p 这个是缩写么？呵呵，俺赶紧去复习css-doodle去{:4_173 ...



花飞飞 发表于 2023-4-20 17:53

https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js
这个就是传说中的JS文件。。。
百搭的么

花飞飞 发表于 2023-4-20 17:53

https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js
对比一下彼岸花，一样的。

绿叶清舟 发表于 2023-4-20 19:59

这么快，怎么会飞啊

马黑黑 发表于 2023-4-20 19:59

花飞飞 发表于 2023-4-20 17:53
https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js
对比一下彼岸花，一样的。

反正就是两种方式吧，你认为哪一种更合适就用哪一种

红影 发表于 2023-4-20 21:18

起个网名好难 发表于 2023-4-20 16:58


谢谢难难，原来是pick的缩写，原来除了能在字母和数字里选，还能选特殊符号{:4_173:}

起个网名好难 发表于 2023-4-20 22:17

红影 发表于 2023-4-20 21:18
谢谢难难，原来是pick的缩写，原来除了能在字母和数字里选，还能选特殊符号

https://css-doodle.com/#usage

小辣椒 发表于 2023-4-20 22:27

这个喇叭是颜色层次分明，色彩靓丽，效果棒棒{:4_199:}

马黑黑 发表于 2023-4-20 22:28

小辣椒 发表于 2023-4-20 22:27
这个喇叭是颜色层次分明，色彩靓丽，效果棒棒

感谢支持。晚上嚎

小辣椒 发表于 2023-4-20 22:35

黑黑加js效果小辣椒就直接套用了{:4_189:}

马黑黑 发表于 2023-4-20 22:35

红影 发表于 2023-4-20 16:06
可以直接弄到那些音符的啊，这个漂亮。 @p 这个是缩写么？呵呵，俺赶紧去复习css-doodle去{:4_173 ...

在随机汉字里实际上已经用了这个函数

马黑黑 发表于 2023-4-20 22:37

小辣椒 发表于 2023-4-20 22:35
黑黑加js效果小辣椒就直接套用了

尽管用就是

小辣椒 发表于 2023-4-20 22:38

马黑黑 发表于 2023-4-20 22:37
尽管用就是

套用省心省力

马黑黑 发表于 2023-4-20 22:39

小辣椒 发表于 2023-4-20 22:38
套用省心省力

这个是全新的东东，一般情况下代码都相对简短，但也可以无限复杂
页: [1] 2
查看完整版本: 绿叶清舟可以跟这个喇叭谈谈心