demo-1 flex 布局

flexbox 是 一种一维布局，只能处理一行或者一列。

写基础的好生无趣，放飞了

scss核心代码

<template lang="pug">
.container
    - for (var i = 1; i <= 25; i++)
        .square 
</template>
<style scoped lang="scss">
.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 500px;
    animation: rotate 5s infinite;
    perspective: 600px;
    // &:hover { animation-play-state: paused; }
    margin: 2em auto;
}

.square {
    width: 18%;
    height: 18%;
    border-radius: 50%;
    margin: 1%;
    background-color: rgba(255,255,255, .5);
    animation: rotate 10s infinite;
}

$n:25;
@while $n > 0 {
    .square:nth-child(#{$n}){
        animation-delay:0s+200ms*$n;
        background-color: rgba(10 * $n,255 - 10 * $n,255, $n * 0.02);
    }
    $n: $n - 1;
}

@keyframes rotate {
    25% { transform: rotateY(-180deg); }
    50% { transform: rotateY(-180deg) rotateX(-180deg); }
    75% { transform: rotateY(-180deg) rotateX(-180deg) rotateY(180deg); }
    100% { transform: rotate(0); }
}

</style>

grid布局 瞎写

css 渐变

渐变色彩实际上不是颜色（color），而是图像（image）对象，通常用来作为元素背景。

linear-gradient语法

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
              渐变轴线的定义                 颜色停止点的定义  

<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage> | <length> ]?

图二

<template lang="pug">
.demo3-1 
    p linear-gradient(to left ,red,green)
center 图一
.degbox
    - for (var i = 1; i <= 36; i++)
            .deg 
center 图二
.moreColor
center 图三 添加更多的颜色
.moreColor.percent background: linear-gradient(45deg, #000000 0 ,#111111 10%,#222222 20%,#333333 30%,#444444 40%,#555555 50%,#aaaaaa 100%);
.moreColor.same background: linear-gradient(45deg, #000000 0 ,#111111 10%,#aaaaaa 100%);
center 上面两个图不一样

</template>
<style lang="scss" scoped>
.demo3-1,.moreColor{
    width:100%;
    height:300px;
    display:flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 2em;
    font-weight: bolder;
    background:linear-gradient(to left ,red,green);
}
.moreColor{
    background: linear-gradient(90deg,red,blue,green,yellow,pink,gray,black,white,#ff00ff,#665544,#123456);
    color: #fff;
        opacity: .5;
    &.percent{
        background: linear-gradient(
            45deg, #000000 0 ,#111111 10%,#222222 20%,#333333 30%,#444444 40%,#555555 50%,#aaaaaa 100%
        );
    }

    &.same{
        background: linear-gradient(
            45deg, #000000 0 ,#111111 10%,#aaaaaa 100%
        );
    }
}

.degbox{
    display: flex;
    flex-wrap: wrap;
}

.deg{
    height: 6em;
    width: 16.6%;
}

$n: 36;
  @while $n > 0 {
    .deg:nth-child(#{$n}) {
      background: linear-gradient( ($n * 10deg),rgba(10 * $n, 255 - 10 * $n, random(255), $n * 0.02),#ff99ff);
    }
    $n: $n - 1;
  }

</style>

透明边框