然后定义一个<css-doodle></css-doodle>标签,用于容纳所绘制的图案。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <!DOCTYPEhtml><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=
<css-doodle>color:#fff;background:#333;:before{content:'JELLY';}@grid:5/100vw;:doodle{grid-gap:1px;}@random{background:#60569e;}opacity:@pick(1,.7,.8,.9);transform:scale(@rand(.2,.9));</css-doodle> 选择器扩展 @row(num) 选择指定行,num从1开始 <css-doodle>color:#fff;backgro...
css-doodle.github.iocss-doodle.github.ioPublic 🌐 Home page for css-doodle HTML164 clicliPublic Command-line tool for css-doodle to preview and generate images/videos. JavaScript161 postcss-doodlepostcss-doodlePublic PostCSS plugin that enables the use of css-doodle generators ...
<css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案(CSS 图案)。创建出来的图案你可以运用于Web页面中。 当你看到Custom Elements、Shadow DOM和CSS Grid的时候,一定很担忧兼容问题。事实上你的担...
<css-doodle grid="5"> :doodle { width: 8em; height: 8em; gap: 1px; } background: #60569e; </css-doodle> The row or column is limited up to 4096 only when the grid is 1-dimensional: <css-doodle grid="1x35"> :doodle { @size: 8em 12em; /* width: 8em; height: 12...
<css-doodle /> A web component for drawing patterns with CSS. Example <css-doodle> @grid: 5 / 200px; background: @p(#000, #fff); margin: 1px; </css-doodle> Docs https://css-doodle.com Design tools Tabbied -- Doodle with generated patterns Shapes -- Discover new CSS polygon shape...
<css-doodle> @grid: 5 / 200px; background: @p(#000, #fff); margin: 1px; </css-doodle> Docs https://css-doodle.com Design tools Tabbied -- Doodle with generated patterns Shapes -- Discover new CSS polygon shapes SVG playground -- Generate SVG code with new syntax Resources An Intro...
官方地址: https://css-doodle.com/ <css-doodle />是一个Web组件。其基于Shadow DOM V1和Custom Elements V1来构建的。该组件可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案(CSS 图案)。创建出来的图案你可以运用于Web页面中。 当你看到Custom Elements、Shadow DOM和CSS Grid的...
:doodle这个选择器选中的是<css-doodle>这个标签。 @grid的使用可以猜得到实质上它是用了CSS3的Grid布局,在控制台中就能看出这个布局,一行分了7个格子: 另外vmax这个单位也是CSS3中的表示尺寸的单位,意思是取宽度和高度大的那个作为标准(手机横放和竖放的时候会造成宽度和高度的改变),1vmax就是这个标准的1/100。
npm install css-doodle 或者使用yarn来安装: yarn add css-doodle 然后在你想要使用<css-doodle />的地方先import,比如在App.vue文件中: import CSSDoodle from 'css-doodle' 然后你就可以在<template>中引用,比如: <css-doodle> :doodle { @grid: 20 / 100vmax; ...