山东省城乡和住房建设厅网站,网站建设人员的安排,怎么把网站整站下载,海口网站建设方案推广前端的开发工作中#xff0c;CSS 是不可或缺的部分#xff1b;实际工作中#xff0c;我们通过JavaScript 来进行数据和交互工作#xff0c;CSS 为用户呈现可视化的界面。有时#xff0c;CSS 来进行部分交互效果是不是会比 JavaScript 更高效、更省事呢#xff1f; 一、变…前端的开发工作中CSS 是不可或缺的部分实际工作中我们通过JavaScript 来进行数据和交互工作CSS 为用户呈现可视化的界面。有时CSS 来进行部分交互效果是不是会比 JavaScript 更高效、更省事呢 一、变量使用 一命名规范 我们已经很熟悉 JavaScript 中的变量了在 JavaScript 中
var a hellow world在 CSS 中以两个横线开头的“属性”都是 CSS 变量其他没有任何限制如
:root {--1: red
}
/*** var()函数就是用于读取变量* color: var(--深蓝, #fff); //第二个参数就是默认值* 假设--深蓝为空情况下会使用#fff**/
body {color: var(--1)--深蓝: #fffbackground-color: var(--深蓝, #fff)
}// 注意变量值只能用作属性值不能用作属性名
.foo {--style: color/* 很显然下面是无效的 */var(--style): black
}二变量值类型 如果变量值是一个字符串可以与其他字符串拼接如
--bar: hello
--foo: var(--bar) world// 示例
body:after {content: --screen-category : var(--screen-category)
}如果变量值是数值不能与数值单位直接连用如
foo {--gap: 20;/* 下面无效 */margin-top: var(--gap)px/* 通过calc去计算下面有效 */margin-top: calc(var(--gap) * 1px)
}如果变量值带有单位就不能写成字符串如
/* 无效 */
.foo {--foo: 20pxfont-size: var(--foo)
}/* 有效 */
.foo {--foo: 20pxfont-size: var(--foo)
}三变量作用域 :root 选择器允许你定位到 DOM 中的最顶级元素或文档树相当于全局变量同一个 CSS 变量可以在多个选择器内声明。读取的时候优先级最高的声明生效。这与 CSS 的层叠cascade规则是一致的如
style:root { --color: black }div { --color: blue }#test{ --color: red }* { color: var(--color) }
/stylep黑色/p
div蓝色/div
div idtest红色/div二、兼容性处理和 JavaScript 操作 浏览器兼容性自查网站caniuse 一兼容性处理 对于不支持 CSS 变量的浏览器有两种方法如 方法一
:root { --color: black; }
div {color: #fff;color: var(--color) // 如果这里读不出值那么并不会覆盖上面的color
}方法二
div {supports ( (--a: 0)) {/* supported */}supports ( not (--a: 0)) {/* not supported */}
}二JavaScript 操作 JavaScript 也可以检测浏览器是否支持 CSS 变量如
const isSupported window.CSS window.CSS.supports window.CSS.supports(--a, 0)if (isSupported) {/* supported */
} else {/* not supported */
}JavaScript操作CSS变量的写法如下
// 设置变量
document.body.style.setProperty(--color, #7F583F) //局部
document.documentElement.style.setProperty(--color, #7F583F) //全局// 读取变量
document.body.style.getPropertyValue(--color).trim() //局部
document.documentElement.style.getPropertyValue(--color).trim() //全局
getComputedStyle(document.documentElement).getPropertyValue(--color) // 全局如果是在css表中设置的需要这种方式获取// 删除变量
document.body.style.removeProperty(--color) //局部
document.documentElement.style.removeProperty(--color) //全局这意味着JavaScript 可以将任意值存入样式表。同步一个监听事件将信息被存入 CSS 变量如
const docStyle document.documentElement.styledocument.addEventListener(mousemove, (e) {docStyle.setProperty(--mouse-x, e.clientX)docStyle.setProperty(--mouse-y, e.clientY)
})可以看出CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。 三、趣味案例 一打字机年度报告项目 实现方式
p classgreet-info line-5span v-for(item, index) in greetInfoArr :keygreet- index{{ item }}/span
/pexport default {
computed: {greetInfoArr() {return this.greetInfo.split()}},data() {return {greetInfo:“开始完成一件事情比做好它更重要。因为只要开始了你就有机会把它做的更好”}}
}style langscss
.greet-info {position: absolute;z-index: 9;left: 18.75%;bottom: 7.41%;font-size: 24px;font-weight: 400;color: #ffffff;line-height: 33px;keyframes revolveScale {60% {opacity: 0;}100% {opacity: 1;}}span {display: inline-block;opacity: 0;--time: calc(var(--greet-index) * 0.1s 2s);// forwards当动画完成后保持最后一帧的状态animation: revolveScale 0.4s forwards; animation-delay: var(--time);}
}
/style效果 二自动变色进度条 实现方式
!-- 当进度小于 30% 时背景呈红色当进度大于 30% 并且 小于 60% 时背景呈橙色当进度大于 60% 并且 小于 90% 时背景呈蓝色当进度大于 90% 时背景呈绿色 --div classbar style--percent: 50/divstyle langscss
.bar {display: flex;width: 600px;height: 20px;background-color: #f5f5f5;
}
.bar::before {// 创建或重置一个或多个计数器counter-reset: progress var(--percent);// counter() 函数以字符串形式返回当前计数器的值, 表示空格content: counter(progress) %\2002;display: flex;justify-content: end;width: calc(var(--percent) * 1%);font-size: 12px;color: #fff;white-space: nowrap;// 渐变色background-image: linear-gradient(green, green),linear-gradient(#2486ff, #2486ff), linear-gradient(orange, orange),linear-gradient(red, red);background-size: calc((var(--percent) - 90) * 100%) 100%,calc((var(--percent) - 60) * 100%) 100%,calc((var(--percent) - 30) * 100%) 100%, 100% 100%;
}
/style
效果 三悬浮跟踪按钮 实现方式
div classbruce flex-ct-xa classtrack-btnspan妙用CSS变量让你的CSS变得更心动/span/a
/div// js 监听鼠标修改变量值
const btn document.getElementsByClassName(track-btn)[0];
const btnStyle btn.style;
btn.addEventListener(mousemove, e {btnStyle.setProperty(--x, ${e.offsetX}px);btnStyle.setProperty(--y, ${e.offsetY}px);
});
.bruce {overflow: hidden;height: 100vh;
}
.flex-ct-x {display: flex;justify-content: center;align-items: center;
}
.track-btn {overflow: hidden;position: relative;border-radius: 25px;width: 400px;height: 50px;background-color: #66f;cursor: pointer;line-height: 50px;text-align: center;font-weight: bold;font-size: 18px;color: #fff;span {position: relative;pointer-events: none; // 不加会卡顿}::before {--size: 0;position: absolute;left: var(--x);top: var(--y);width: var(--size);height: var(--size);background-image: radial-gradient(circle closest-side, #09f, transparent);content: ;transform: translate3d(-50%, -50%, 0);transition: width 200ms ease, height 200ms ease;}:hover::before {--size: 400px;}
}效果
四、思考与总结 CSS 变量的美在于其本质是响应式的。一旦 CSS 变量更新了任意带有 CSS 变量的属性的值也都会随之更新。它的好处有哪些呢可以减少样式代码的重复性增加样式代码的扩展性提高样式代码的灵活性增加一种CSS与JS的通讯方式无需深层遍历DOM改变某个样式。在做系统主题切换风格基调字体、色系封装些通用性的动态组件通过 CSS 变量并结合动画是不是就很方便做到了。
