03 CSS Variables

2018-12-12 本文已影响0人地平线0530

效果

点击图片查看效果

Demo
Github

知识点

:root
CSS变量：var(--xxx)
CSS滤镜：filter
事件：change、mousemove

笔记

:root

:root 匹配文档树的根元素，对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 <html> 选择器相同。

:root{
  --base: orange;
  --spacing: 10px;
  --blur: 10px;
}

CSS 变量

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。

声明一个局部变量：

element {
  --baseColor: green;
  color: var(--baseColor);
  background: var(--baseColor);
}

声明一个全局变量：

:root {
  --baseColor: yellow;
  --basePadding: 10px;
}

.demo {
  color: var(--baseColor);
}

注意：CSS 变量区分大小写！

CSS滤镜

filter 语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Filter	描述
`blur()`	模糊图像
`brightness()`	让图像更明亮或更暗淡
`contrast()`	增加或减少图像的对比度
`drop-shadow()`	在图像后方应用投影
`grayscale()`	将图像转为灰度图
`hue-rotate()`	改变图像的整体色调
`invert()`	反转图像颜色
`opacity()`	改变图像透明度
`saturate()`	超饱和或去饱和输入的图像
`sepia()`	将图像转为棕褐色
`url()`	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

参考：

`CSSStyleDeclaration.setProperty()`

CSSStyleDeclaration.setProperty() 方法接口为一个声明了CSS样式的对象设置一个新的值。

参考资料

使用CSS变量
 :root 伪类
 css 滤镜
 setProperty() 方法