css-doodles实现好看的随机花朵效果代码
代码语言:html
所属分类:其他
代码描述:css-doodles实现好看的随机花朵效果代码
代码标签: css-doodles 好看 随机 花朵
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #1e1e1e;
}
graph {
position: relative;
width: 70vmin;
height: 100vmin;
background: #1e1e1e;
}
</style>
</head>
<body translate="no">
<style>
css-doodle {
--rule: (
:doodle {
@grid: 200x1 / 70vmin 100vmin;
overflow: visible;
contain: initial;
--colors: @p(
(#e9dbce, #fceade, #ea526f, #e2c290, #6b2d5c, #25ced1),
(#c9cba3, #ffe1a8, #e26d5c, #723d46, #472d30),
(#2B2B2B, #91B3E1, #2F5FB3, #3D4B89, #AE99E8, #DBE2EC),
(#114b5f, #1a936f, #88d498, #c6dabf, #f3e9d2),
(#e42268, #fb8075, #761871, #5b7d9c, #a38cb4, #476590)
);
--color-1: @p(--colors);
--color-2: @P;
--color-3: @P;
--color-4: @P;
--color-5: @P;
--color-6: @P;
background-image: @svg(
viewBox: 0 0 1000 1000;
circle*400 {
cx: @r(20, 980);
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0