8个美丽的CSS动态背景图案模式

使用css-doodle.js构建的pattern，带悬停动画。

css, math, pattern

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4535
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="wrapper">
    <div class="title">
        <div></div>CSS
        <BR/>DOODLE</div>
    <div class="artboard">
        <section>
            <css-doodle grid="8">
                @use: var(--base); @random(){ border-top:1px solid #000; transform:rotate(45deg); } @random(){ border-left:1px solid #000; transform:rotate(45deg); } @random(){ border-bottom:1px solid #000; transform:rotate(45deg); } @random(){ border-right:2px solid
                #000; transform:rotate(45deg); }
            </css-doodle>
        </section>
        <section>
            <css-doodle grid="7">
                @use: var(--base); border-radius:50%; @odd { border-top:2px solid #000000; } @even { border-bottom:2px solid #000000; } :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: rotation 2s linear infinite; animation-play-state:var(--s); @keyframes
                rotation { to { transform: rotate(360deg); } }
            </css-doodle>
        </section>
        <section>
            <css-doodle grid="7">
                @use: var(--base); transform: rotate(45deg) scale(.3); background:#000000; :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: rotation 2s linear calc( ( @abs(@col()-4) + @abs(@row()-4) )*300ms) infinite alternate; animation-play-state:var(--s);
                @keyframes rotation { to { transform: rotate(45deg) scale(1); } }

</css-doodle>
        </section>
        <section>
            <css-doodle grid="9">
                @use: var(--base); clip-path: polygon(65% 0, 65% 20%, 20% 20%, 20% 65%, 35% 65%, 35% 35%, 65% 35%, 65% 65%, 0 65%, 0 80%, 20% 80%, 20% 100%, 35% 100%, 35% 80%, 80% 80%, 80% 35%, 100% 35%, 100% 20%, 80% 20%, 80% 0); background:#000; @odd{ transform:rotate(90deg);
                }

</css-doodle>
        </section>
        <section>
            <css-doodle grid="8">
                @use: var(--base); @place-cell: center; @size: calc(150% / @size() * @i()); border: 1px solid #000; :doodle { --s: paused; } :doodle(:hover) { --s: running } transform: rotate(calc(@i() * 10deg)); animation: rotation 2s ease-in-out 0s infinite alternate;
                animation-play-state:var(--s); @keyframes rotation { to { transform: rotate(0); } }
            </css-doodle>
        </section>
        <section>
            <css-doodle grid="6">
                @use: var(--base); @place-cell: @rand(100%) @rand(100%); @size: calc(100% / @size() * @i()); border: 1px solid #000; :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: shrink 2s linear @rand(2000)ms infinite alternate; animation-play-state:var(--s);
                @keyframes shrink { to { transform: scale(.2); } }
            </css-doodle>
        </section>
        <section>
            <css-doodle grid="7">
                @use: var(--base); @shape:pear; background:#000; @even { transform:scale(var(--large)); animation: scale_1 2s linear 0s infinite alternate; animation-play-state:var(--s); } @odd { transform:rotate(180deg) scale(var(--small)); animation: scale_2 2s linear
                0s infinite alternate; animation-play-state:var(--s); } :doodle { --s: paused; --large:1.4; --small:.5; } :doodle(:hover) { --s: running } @keyframes scale_1 { to { transform:scale(var(--small)); } } @keyframes scale_2 { to { transform:rotate(180deg)
                scale(var(--large)); } }
            </css-doodle>
        </section>
        <section>
            <css-doodle grid="5">
                @use: var(--base); @place-cell: center; @size: @rand(100%); border-radius:@rand(30%,50%); border:1px solid #000; :doodle { --s: paused; } :doodle(:hover) { --s: running } animation: scale-up @rand(1s,4s) linear calc(@index()*100ms) infinite; animation-play-state:var(--s);
                @keyframes scale-up { to { filter:blur(3px); transform: rotate(360deg) scale(2); } }
            </css-doodle>
        </section>
    </div>
    <div class="credit">Hover to reveal magic effects!</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.9/css-doodle.min.js'></script>

使用css-doodle.js构建的pattern，带悬停动画。

css, math, pattern

编辑器支持Emmet

快捷键

使用css-doodle.js构建的pattern，带悬停动画。

css, math, pattern

CSS3 不断改变背景色以及文字上下起伏式的LOADING动效

10款单元素CSS构建的卡牌模式图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：