效果
点击图片查看效果
知识点
: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样式的对象设置一个新的值。
网友评论