css原来也可以这么酷！css生成艺术【笔记】
2019-04-12 本文已影响0人
槑小姐_1419
【css笔记】
css 大会 袁川
演讲主要讲了用 css 生成一些炫酷的图片，首先先复习了下简单的知识，然后使用工具把简单的图片进行变换和组合，然后就是一个复杂到可能都不知道怎么出现的图片了！
感觉简单到复杂只缺一个css-doodle了。
1. 简单绘图
- 直线
- 设置 宽度高度 + 背景颜色
- 使用
border - 使用背景
linear-gradient（#000，#000）50%/70% 10px no-repeat - 使用下划线 隐藏字体
image.png
- 虚线
- 使用下划线 隐藏字体
- CSS3
text-emphasis属性 [目前主流浏览器不支持该属性] - 使用
background
image.png
border
- 圆
1.border-radius
- 使用
background-image边缘不够光滑
image.png
- 点号
.放大
image.png
-
clip-path :circle(50%)不能用边框 和 box-shadow
- 三角形
- 用
border三边透明
- ·
clip-path
image.png
-
unicode用伪元素
image.png
- 多边形
-
clip-path
计算点 然后连接起来
image.png
-
通过数学函数 画图形
image.png
- 通过
eveodd重叠部分消失 得到很多图形
image.png
-
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什么事了！
