标签搜索
隐藏侧边栏

给你的网站加点花哨

搞前端的半夏
2022-05-11 / 0 评论 / 0 点赞 / 24 阅读 / 1,578 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-11,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

在开发个人博客的时候,总想着尽可能的花哨一下!本来网站的背景是跟掘金一个颜色的,后来换成了linear-gradient渐变的背景

大概就是这样子的,看上去还是很舒服的。不过呢,我觉得呀还是不过画,于是呢我就开始去谷歌搜索,各种网站的设计。最后让我找到了一个神器!

image-20211117222339567

css-doodle

翻译成中文就是涂鸦的意思。官方介绍:css-doodle是基于 shadow DOM v1和custom Elements v1。 对于这两个东西我是第一次见到,我搜了几篇文章感觉shadow DOM类似其他语言的函数封装,他将结构样式行为封装起来,与页面上的其他东西分开。custom Elements就是Web Components 允许开发者自定义标签的一个特性。

css-doodle本质上其实是根据CSS去生成div网格。

安装

官方提供了两种安装方式:

  1. <script src="https://unpkg.com/css-doodle@0.21.6/css-doodle.min.js"></script>

  2.  npm install css-doodle
    
     /* import it */
     import 'css-doodle';
    

用法

css-doodle基于css的语法,并且它本身还提供了很多其他的属性值。包括属性,选择器,函数,以及js api.

image-20211117223817601

示例

例如下面这个官方提供的例子:

css-doodle的自定义标签是<css-doodle>.这里的click-to-update就是自带的js方法,这个方法通过应为就知道,当点击的时候,会更新涂鸦。标签内部可以直接写style标签,当然本来html也支持这么写。style里面通过:doodle来使用自带的属性。同时也可以写css原生的属性。

<css-doodle click-to-updatee>
  <style>
    :doodle {
      @grid: 18 / 100vmax;
      background: #0a0c27;
    }
    --hue: calc(180 + 1.5 * @row * @col);
    background: hsl(var(--hue), 50%, 70%);
    margin: -.5px;
    transition: @r(.5s) ease;
  </style>
</css-doodle>

详细步骤

  1. 定义<css-doodle>元素,并添加:doodle选择器,我们可以在其中添加各种属性。

    <css-doodle> 
        :doodle {} 
    </css-doodle>
    
  2. 定义网格

    :doodle { 
       @grid: 5x5;     
    } 
    

    这里还可以定义网格的大小之类。例如定义宽高

    width: 8em; height: 8em; 也可使用@size
    

3 使用其他自带方法,

例如下面@rand(.1,.9)

通过设置简单的颜色加上一个scale的随机放大缩小,就可以制作出一个花哨的背景。

<css-doodle>
    :doodle {
        @grid: 10x10;
        @size: 100vmax;
        grid-gap: 1px;
    }
   background-color: hsla(@r(360), 85%, @r(70%, 90%), @r(.9));
  transform: scale(@rand(.1,.9));
</css-doodle>

image-20211117225953572

  1. 自定义形状

在css-doodle中你还可以使用自定义形状。

clip-path: @shape(
  points: 300;
  r: cos(4t);
);

简单的几行代码就是一朵花。

image-20211117230245145

0

评论区