【css筆記】
css 大會 袁川
演講主要講了用 css 生成一些炫酷的圖片，首先先復(fù)習(xí)了下簡單的知識，然后使用工具把簡單的圖片進(jìn)行變換和組合，然后就是一個復(fù)雜到可能都不知道怎么出現(xiàn)的圖片了！
感覺簡單到復(fù)雜只缺一個css-doodle了。
1. 簡單繪圖
- 直線
- 設(shè)置 寬度高度 + 背景顏色
- 使用
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 - 點(diǎn)號
.放大
image.png -
clip-path :circle(50%)不能用邊框 和 box-shadow
- 三角形
- 用
border三邊透明
- ·
clip-path
image.png -
unicode用偽元素
image.png
- 多邊形
-
clip-path
計(jì)算點(diǎn) 然后連接起來
image.png -
通過數(shù)學(xué)函數(shù) 畫圖形
image.png - 通過
eveodd重疊部分消失 得到很多圖形
image.png
-
box-shadow重疊抵消
image.png
2 把簡單圖形組合在一起
- css grid
隨機(jī)選擇一條直線擋在格子里
隨機(jī)一個角度
- css doodle 使用工具
注意： 以下所有代碼 皆可填充到 官網(wǎng)中查看 ，可以自行修改數(shù)據(jù)，創(chuàng)造自己的圖案
gird - auto -flow 自動填充
3. 對圖形進(jìn)行變換 疊加
- 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
)
- 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;
-栗子
- box-shadow
- text-decoration + perspective
text-decoration
旋轉(zhuǎn)波浪線
- svg-filter
變形
- 舉栗 云效果 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 屬性是一個簡寫屬性，用于設(shè)置六個動畫屬性：
-
animation-name-規(guī)定需要綁定到選擇器的keyframe名稱 -
animation-duration-規(guī)定完成動畫所花費(fèi)的時間，以秒或毫秒計(jì)。 默認(rèn)是 0。注意為0時沒有動畫 -
animation-timing-function-規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 -
animation-delay-規(guī)定在動畫開始之前的延遲。默認(rèn)是 0。 -
animation-iteration-count- 規(guī)定動畫應(yīng)該播放的次數(shù)。默認(rèn)是 1。 -
animation-direction規(guī)定是否應(yīng)該輪流反向播放動畫。-
最重要的@keyframe
/* 顏色變化*/
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
動畫使用可以在css-doodle中 出現(xiàn)神奇的效果
代碼如下 效果就自己去看吧~
`
--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));
}
}
`
總結(jié)來說：
看了才知道，原來css酷起來就沒js什么事了！
