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

马黑黑

: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); } }

马黑黑

代码

1. <script>document.write('<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"><\/script>');</script>
   
2. 
   
3. <css-doodle>
   
4.         :doodle {
   
5.                 @grid: 4 / 260px 200px;
   
6.                 background: #F6F6F6 url('https://638183.freep.cn/638183/t23/btn/laba.jpg') no-repeat 60px 0px / 200px 200px;
   
7.                 cursor: pointer;
   
8.                 --state: running;
   
9.         }
   
10.         :doodle(:hover) { --state: paused; }
    
11.         position: absolute;
    
12.         @place-cell: 100px 48%;
    
13.         :after {
    
14.                 content: @p(&#9835;,&#9834;,&#9833;,&#9836;);
    
15.                 color: @p(red,pink,orange,green,blue);
    
16.         }
    
17.         animation: fly 1s @r(-2,2)s infinite var(--state);
    
18.         @keyframes fly {
    
19.                 from { transform: rotate(0deg) translate(0px); }
    
20.                 to { transform: rotate(@r(-60,60)deg) translate(-120px); }
    
21.         }
    
22. </css-doodle>

复制代码

马黑黑

看完绿叶清舟的帖子，

https://www.huachaowang.com/foru ... hread&tid=68103

就想到弄弄这个

梦油

绝妙的设计，高！

梦缘

精彩的喇叭，感谢分享！

红影

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

起个网名好难

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

花飞飞

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

花飞飞

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

绿叶清舟

这么快，怎么会飞啊

马黑黑

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

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

红影

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

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

起个网名好难

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

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

小辣椒

这个喇叭是颜色层次分明，色彩靓丽，效果棒棒

马黑黑

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

感谢支持。晚上嚎

小辣椒

黑黑加js效果小辣椒就直接套用了

马黑黑

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

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

马黑黑

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

尽管用就是

小辣椒

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

套用省心省力

马黑黑

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

这个是全新的东东，一般情况下代码都相对简短，但也可以无限复杂