马黑黑 发表于 2023-4-11 08:05

css-doodle加餐教程（一）

我们曾经使用纯CSS+HTML实现过多叶草播放控制器，很多朋友也非常喜欢。多叶草，如果使用 css-doodle 实现，那是小菜一碟，短短几句代码就能出来令人惊叹的效果：

<css-doodle grid="1">
        :doodle {
                @size: 160px;
        }
        background: rgb(20,20,200);
        @shape: clover,4;
</css-doodle>


你可以去这里运行以上代码，看看效果：pencil code (freeee.ml)

代码解读：

① <css-doodle> 标签顺带建立一个 1x1 的网格；

② :doodle {} 代码块里，使用属性 @size 设定了父元素的宽高尺寸为 160x160 px；

③ :doodle {} 代码块之外的代码是基于单元格的，即网格内部的子元素，一个是使用常规CSS代码设置背景颜色，另一个使用 css-doodle 的内置 @shape 属性来设置形状，属性值为 clover,4 ，clover 是三叶草的英文单词，加一个参数 4 表示是四叶草，5 就是五叶草了，目前就这三种。


@shape: clover,4; 还可以写成：@shape: clover, 4; 或 @shape: clover 4;


css-doodle 的 @shape 属性提供28种基本图形。想一睹为快，请访问这里：<css-doodle />

本次加餐到此为止。这个只是开胃菜，等有空，我们深加工一下这道菜，让三叶草旋转起来并且能够有效控制，就像我们的多叶草播放器一样。

红影 发表于 2023-4-11 10:17

css-doodle 的内置属性能直接完成图案设计，这个比较难理解，不像纯CSS+HTML一步步看着容易懂{:4_204:}

红影 发表于 2023-4-11 10:30

@shape返回一个使用 clip-path 和 polygon() 生成的图形。找到了@shape 属性的28种基本图形

https://pic.imgdb.cn/item/6434c5ef0d2dde5777ec990b.png

马黑黑 发表于 2023-4-11 12:09

红影 发表于 2023-4-11 10:17
css-doodle 的内置属性能直接完成图案设计，这个比较难理解，不像纯CSS+HTML一步步看着容易懂

熟悉了 css-doodle 的选择器、属性、函数和JS API，你就会觉得 纯CSS+HTML 太复杂了，因为，css-doodle 将这些都简化了，让使用者用更少的代码实现丰富的功能。

马黑黑 发表于 2023-4-11 12:10

红影 发表于 2023-4-11 10:30
@shape返回一个使用 clip-path 和 polygon() 生成的图形。找到了@shape 属性的28种基本图形

对，这是官网给出的

红影 发表于 2023-4-11 19:27

马黑黑 发表于 2023-4-11 12:09
熟悉了 css-doodle 的选择器、属性、函数和JS API，你就会觉得 纯CSS+HTML 太复杂了，因为，css-doodle...

问题是，想熟悉还得下点功夫才行啊{:4_173:}

红影 发表于 2023-4-11 19:28

马黑黑 发表于 2023-4-11 12:10
对，这是官网给出的

这些应该算是它封装好的东东吧。

马黑黑 发表于 2023-4-11 19:29

红影 发表于 2023-4-11 19:27
问题是，想熟悉还得下点功夫才行啊
其实啊都是语义化的选择器、属性、函数等命名，有点高中英语基础，即使不会grid布局，也很快掌握 css-doodle

马黑黑 发表于 2023-4-11 19:29

红影 发表于 2023-4-11 19:28
这些应该算是它封装好的东东吧。

组件就是封装

红影 发表于 2023-4-11 22:14

马黑黑 发表于 2023-4-11 19:29
其实啊都是语义化的选择器、属性、函数等命名，有点高中英语基础，即使不会grid布局，也很快掌握 css-doo ...

只知道单词没用啊，就算大学英语系毕业的，也不一定会代码啊{:4_173:}

红影 发表于 2023-4-11 22:15

马黑黑 发表于 2023-4-11 19:29
组件就是封装

我更喜欢封装这个词，被你用的多，都习惯了{:4_173:}

马黑黑 发表于 2023-4-11 22:42

红影 发表于 2023-4-11 22:15
我更喜欢封装这个词，被你用的多，都习惯了

封装的不一定是组件，像播放器插件，它只能是插件，而不是组件

雨中悄然 发表于 2023-4-12 08:43

基本形状都试了试，好玩得很

红影 发表于 2023-4-12 10:52

马黑黑 发表于 2023-4-11 22:42
封装的不一定是组件，像播放器插件，它只能是插件，而不是组件

这些词汇真绕的很{:4_173:}

马黑黑 发表于 2023-4-12 12:50

红影 发表于 2023-4-12 10:52
这些词汇真绕的很

组件是一个大体系，插件是基于某个小功能

马黑黑 发表于 2023-4-12 13:01

雨中悄然 发表于 2023-4-12 08:43
基本形状都试了试，好玩得很

嗯，这个还不错的

雨中悄然 发表于 2023-4-12 19:31

马黑黑 发表于 2023-4-12 13:01
嗯，这个还不错的

试着把那朵花换了个形状做了个贴，还得等会才成{:4_170:}

马黑黑 发表于 2023-4-12 19:42

雨中悄然 发表于 2023-4-12 19:31
试着把那朵花换了个形状做了个贴，还得等会才成

看看官网，总能找到感觉

雨中悄然 发表于 2023-4-12 19:49

马黑黑 发表于 2023-4-12 19:42
看看官网，总能找到感觉

进去看了，云里雾里的又出来了

红影 发表于 2023-4-12 22:13

马黑黑 发表于 2023-4-12 12:50
组件是一个大体系，插件是基于某个小功能

那封装呢，这两个都可以叫的吧。
页: [1] 2
查看完整版本: css-doodle加餐教程（一）