css原来也可以这么酷！css生成艺术【笔记】

【css笔记】
css 大会 袁川

视频链接

演讲主要讲了用 css 生成一些炫酷的图片，首先先复习了下简单的知识，然后使用工具把简单的图片进行变换和组合，然后就是一个复杂到可能都不知道怎么出现的图片了！

感觉简单到复杂只缺一个css-doodle了。

1. 简单绘图

- 直线

1. 设置 宽度高度 + 背景颜色
2. 使用 border
3. 使用背景 linear-gradient（#000，#000）50%/70% 10px no-repeat
4. 使用下划线 隐藏字体
   image.png

- 虚线

1. 使用下划线 隐藏字体
2. CSS3text-emphasis属性 [目前主流浏览器不支持该属性]
3. 使用 background
   image.png
4. border

- 圆

1.border-radius

2. 使用background-image 边缘不够光滑
   image.png
3. 点号 . 放大
   image.png
4. clip-path :circle(50%) 不能用边框 和 box-shadow

- 三角形

1. 用 border 三边透明
   
2. ·clip-path
   image.png
3. unicode 用伪元素
   image.png

- 多边形

1. clip-path
   计算点 然后连接起来
   image.png

2. 通过数学函数 画图形

   
   image.png
3. 通过 eveodd 重叠部分消失 得到很多图形
   image.png
   
4. box-shadow 重叠抵消
   image.png

2 把简单图形组合在一起

- css grid

随机选择一条直线挡在格子里

image.png

随机一个角度

image.png

- css doodle 使用工具

官网

注意： 以下所有代码 皆可填充到 官网中查看 ，可以自行修改数据，创造自己的图案

gird - auto -flow 自动填充

3. 对图形进行变换 叠加

- transform

rotate
translateX

  :doodle {
       @grid: 30x1 / 50vmin; 
    }
    :container {
      perspective:16vmin;
    }
    @place-cell: center;
    @size: calc(@i() * 10%);
  
    transform : rotate(@r(360deg));
    
    border-radius: 50%;
    border-style: dotted;
    border-width: calc(@i() * 0.61vmin);
    border-color: @p(
        #bdd454,#457345,
        #607998,#485748
    )

image.png

- grandient 指定多个

可以生成多个

  :doodle {
       @grid: 1x1 / 10vmin; 
    } 

    width : 300px;
    height: 300px;
    background: @m(100, (
        radial-gradient(
            @p(#fff,#000,#345654) 50%,transparent 0 
        )
        @r(100%) @r(100%) / 
        @r(10%) @lr()
        no-repeat
    ));
    mix-blend-mode:overlay;

- mix-blend-mode 混合模式

连接

mix-blend-mode: overlay; //叠加

- background-blend-mode

背景的混合模式。

可以是背景图片与背景图片的混合，
也可以是背景图片和背景色的之间的混合。

:doodle {
       @grid: 1x1 / 100%; 
} 

background: @m(10, (
        linear-gradient(
            @r(360deg),
            @m(29,@p(
                #bdd454, #457345,
                #607998, #485748
                ))
        )
    ));
    background-blend-mode: difference;

image.png

-栗子

image.png image.png

- box-shadow

image.png

- text-decoration + perspective

text-decoration
旋转波浪线

- svg-filter

变形

image.png

- 举栗 云效果 filter + boxshadow

:doodle {
       @grid: 1 / 10vmin; 

filter: @svg-filter(
  <svg>
  <filter>
  <feTurbulence 
  type="fractalNoise" 
  seed='@r(1000)' 
  baseFrequency=".005"
  numOctaves="10" />
  <feDisplacementMap in="SourceGraphic"
        scale="240" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
  </svg>
  )
}
box-shadow: @m(100,(
    @r(100vw) @r(100vh)
    @r(10vmin,20vmin) @r(20vmin)
@p(#fff,#3f1282)
))

4 动画

animation

让图片动起来~~~

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name -规定需要绑定到选择器的 keyframe 名称
• animation-duration -规定完成动画所花费的时间，以秒或毫秒计。 默认是 0。注意为0时没有动画
• animation-timing-function -规定动画的速度曲线。默认是 "ease"。
• animation-delay -规定在动画开始之前的延迟。默认是 0。
• animation-iteration-count - 规定动画应该播放的次数。默认是 1。
• animation-direction 规定是否应该轮流反向播放动画。-

最重要的@keyframe

/* 颜色变化*/
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

动画使用可以在css-doodle中 出现神奇的效果
代码如下 效果就自己去看吧~

`
--color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
:doodle {
@grid: 30x1 / 18vmin;
--deg: @p(-180deg, 180deg);
}
:container {
perspective: 30vmin;
}
:after, :before {
content: '';
background: var(--color);
@place-cell: @r(100%) @r(100%);
@size: @r(10px);
@shape: heart;
}

  @place-cell: center;
  @size: 100%;

  box-shadow: @m(2,(0 0 50px var(--color)));
  background: @m(100,(
    radial-gradient(var(--color) 50%, transparent 0) 
    @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
    no-repeat
  ));

  will-change: transform, opacity;
  animation: scale-up 12s linear infinite;
  animation-delay: calc(-12s / @size() * @i());

  @keyframes scale-up {
    0%, 95.01%, 100% {
      transform: translateZ(0) rotate(0);
      opacity: 0;
    }
    10% { 
      opacity: 1; 
    }
    95% {
      transform: 
        translateZ(35vmin) rotateZ(@var(--deg));
    }
  }

`

image.png

总结来说：

看了才知道，原来css酷起来就没js什么事了！