css3-doodle | 𝓣𝓪𝓭𝓶's Blog

CSS3-doodle 学习笔记

先放几张效果图:

// import the doodle path
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.min.js"></script>

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

<css-doodle>
    :doodle{
        @grid: 4 x 4 /60% 20rem;
    }
    :after{
        content: "@index()"
    }
    background: pink;
    @shape: @pick('triangle', 'clover 4', 'hexagon', 'diamond', 'heart');
    margin: .5rem;
</css-doodle>

1vmax等于视口宽度或视口高度的百分之一，具体取决于较大
:after ：每个单元格的伪元素，用于生成内容，比如看到的数字
@index() ：是一个函数，返回当前单元格的索引号，注意其开始值是从 1 开始

<css-doodle class="my-doodle">
    :doodle{
        @grid: 8 / 20rem 20rem;
        @shape: circle;
        max-width: 90%;
        background: var(--bg3);
    }
    @keyframes turn {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes glow {
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }
    @random {
        animation: glow .9s ease-out infinite;
    }
    :hover {
        animation: turn .9s ease-in-out infinite;
    }

    @shape: @pick('circle', 'star', 'triangle', 'clover 4', 'bud 5', 'bud 10', 'hexagon', 'diamond', 'heart');
    background: @pick('coral', 'orange', 'pink', 'blueviolet', 'darkslateblue');
    margin: .5rem;
    opacity: calc(@rand(1, 10) / 10);
</css-doodle>

<script>
    const myDoodle = document.querySelector('.my-doodle');
    myDoodle.addEventListener('click', () => {
        myDoodle.update();
    });
</script>
<!--点击视图会更新随机选项-->

scale()--放大或者缩小(1区分)
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
opacity 透明度随机比例

<css-doodle>
    :doodle {
        @grid: 1x10 / 61.8vmin;
    }

    @place-cell: center;
    @size: calc(@index() * 10%);
    border-radius: 50%;
    border-style: dashed;
    border-width: calc(@index() * 1vmin);
    border-color: hsla(
        calc(20 * @index()), 70%, 68%, calc(3 / @index() * .8)
    );

    --d: @rand(20s, 40s);
    --rf: @rand(360deg);
    --rt: calc(var(--rf) + @pick(1turn, -1turn));

    animation: spin var(--d) linear infinite;
    @keyframes spin {
        from { transform: rotate(var(--rf)) }
        to   { transform: rotate(var(--rt)) }
    }
</css-doodle>

HSLA(H,S,L,A)
H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S： Saturation(饱和度)。取值为：0.0% - 100.0%
L： Lightness(亮度)。取值为：0.0% - 100.0%
A： Alpha透明度。取值0~1之间。

<css-doodle grid="5" class="doodle">
    :doodle {
        @grid: 10 / 70vmin 50vmin;
    }
    background: @pick(#29B6F6, #FDD835, #5E35B1, #FFCCBC, #E8EAF6, #B2DFDB, #1B5E20, #2979FF);
    opacity: @rand(.9);
    clip-path: polygon(
        @rand(50%) 0, 50% @rand(70%), 0 @rand(100%)
    );

    animation: test infinite @rand(100s, 150s) linear;

    @keyframes test {
        0% {
            transform: translate3d(0, 0, 0);
        }
        50% {
            transform: translate3d(@rand(-500%, 1000%), @rand(-500%, 1000%), 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
</css-doodle>

以上代码阅读完算是对doodle有个初步的认识并且能够跟着代码写一个简单的demo，更多的需要大家再去官网文档查看并学习
doodle main web

对CSS3的 animation & transition 理解

先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）

　　CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；

　　transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；
transform是transition（过渡动画）的transition-property的一个属性值。　　　

　　animation（动画）、transition（过渡）是css3中的两种动画属性。
animation强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用）；

　　transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。可以认为它有两个关键帧（Transition ＋ Transform ＝两个关键帧的Animation）。

transition(过渡)

语法

transition{ transition-property  transition-duration  transition-timing-function  transition-delay}

各参数解释

transition-property        规定设置过渡效果的 CSS 属性的名称。
transition-duration        规定完成过渡效果需要多少秒或毫秒。
transition-timing-function       规定速度效果的速度曲线。
transition-delay      定义过渡效果何时开始。

触发方式

　　伪类触发：:hover : focus :checked :active

animation(动画)

语法

animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-delay: the time between the element being loaded and the start of the animation sequence.

animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-fill-mode: sets which values are applied before/after the animation.

For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

animation-play-state: pause/play the animation.

animation example

CSS
 .element {
        height: 250px;
        width: 250px;
        margin: 0 auto;
        background-color: red;
        animation-name: stretch;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-delay: 0;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
        animation-play-state: running;
    }

@keyframes stretch {
    0% {
        transform: scale(.3);
        background-color: red;
        border-radius: 100%;
    }
    50% {
        background-color: orange;
    }
    100% {
        transform: scale(1.5);
        background-color: yellow;
    }
}
HTML
<div class="element"></div>

clip-path

效果图

clip-path

解释

括号里各参数对应各点的横纵坐标，现在再回到上面代码里面看对应的代码自然明白了