使用 CSS 变量更改多个元素样式
使用 CSS 变量更改多个元素样式
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
custom-property-name 是必需的, 自定义属性的名称，必需以 – 开头。
value 可选。备用值，在属性不存在的时候使用。
var(custom-property-name, value):root {--main-bg-color: coral;--main-txt-color: blue;--main-padding: 15px;
}#div1 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}#div2 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}
创建一个自定义的 CSS 变量
创建一个 CSS 变量，只需要在变量名前添加两个破折号，并为其赋值。
这样会创建一个–penguin-skin变量并赋值为gray（灰色）。
其他元素可通过该变量来设置为gray（灰色）。
--penguin-skin: gray;
使用一个自定义的 CSS 变量
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
background: var(--rabbit-basecolor);
变量不生效时设定默认值
当变量因为某些原因导致变量不生效, 可以设置一个备用值。
比如: 有些人正在使用着不支持 CSS 变量的旧浏览器，或者，设备不支持你设置的变量值。
background: var(--penguin-skin, black);
一只会动的兔子
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Easter Rabbit</title>
<style>
html {width: 100%;height: 100%;
}body {width: 100%;height: 100%;background: #E2B29F;display: flex;justify-content: center;align-items: center;
}.rabbit {--rabbit-basecolor: gray;--rabbit-ear-shadow: pink;--rabbit-skicolor:white;position: relative;
}.rabbit .rabbit__body {width: 4em;height: 5.6em;/*在这行以下修改代码*/background: var(--rabbit-skincolor, whitesmoke);border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;-webkit-transform: rotate(-40deg);transform: rotate(-40deg);box-shadow: inset -2.3em -2.7em 0 0 var(--rabbit-basecolor);
}.rabbit .rabbit__head {position: absolute;width: 4em;height: 4.6em;top: -2.5em;left: -2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;-webkit-transform: rotate(-120deg);transform: rotate(-120deg);overflow: hidden;
}.rabbit .rabbit__head:before {content: "";position: absolute;width: 0.65em;height: 0.5em;top: -0.1em;left: 1.8em;background: #F97996;border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;-webkit-transform: rotate(130deg);transform: rotate(130deg);
}.rabbit .rabbit__head:after {content: "";position: absolute;width: 1em;height: 1em;top: 1.5em;left: 1.6em;background: #F4F4F4;border-radius: 50%;box-shadow: inset 0.1em 0.15em 0 0.37em #3D261C;
}.rabbit .rabbit__ear {position: absolute;border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;
}.rabbit .rabbit__ear--left {width: 2.2em;height: 4.7em;top: -5.7em;left: -0.2em;background: var(--rabbit-ear-shadow, #F3E3DE);-webkit-transform: rotate(40deg);transform: rotate(40deg);box-shadow: inset 0.3em -0.4em 0 -0.1em var(--rabbit-basecolor);-webkit-animation: ear-left 5s infinite ease-out;animation: ear-left 5s infinite ease-out;
}.rabbit .rabbit__ear--right {width: 2em;height: 4.7em;top: -5.5em;left: -0.7em;background: var(--rabbit-basecolor);-webkit-transform: rotate(10deg);transform: rotate(10deg);-webkit-animation: ear-right 5s infinite ease-out;animation: ear-right 5s infinite ease-out;
}.rabbit .rabbit__leg {position: absolute;
}.rabbit .rabbit__leg--one {width: 0.8em;height: 3em;top: 2.3em;left: 0.2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(15deg);transform: rotate(15deg);
}.rabbit .rabbit__leg--one:before {content: "";position: absolute;width: 0.8em;height: 0.5em;top: 2.6em;left: -0.2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__leg--three {width: 0.9em;height: 3em;top: 2.4em;left: 0.7em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(10deg);transform: rotate(10deg);
}.rabbit .rabbit__leg--three:before {content: "";position: absolute;width: 0.8em;height: 0.5em;top: 2.6em;left: -0.2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__leg--two {width: 2.6em;height: 3.6em;top: 1.7em;left: 1.6em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(10deg);transform: rotate(10deg);
}.rabbit .rabbit__leg--two:before {content: "";position: absolute;width: 1.6em;height: 0.8em;top: 3.05em;left: 0em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__leg--four {width: 2.6em;height: 3.6em;top: 1.8em;left: 2.1em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(10deg);transform: rotate(10deg);
}.rabbit .rabbit__leg--four:before {content: "";position: absolute;width: 1.6em;height: 0.8em;top: 3.05em;left: 0em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__tail {position: absolute;width: 0.9em;height: 0.9em;top: 3.7em;left: 4em;background: var(--rabbit-basecolor);-webkit-transform: rotate(25deg);transform: rotate(25deg);
}.rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {content: "";position: absolute;width: 100%;height: 100%;background: var(--rabbit-basecolor);border-radius: 50%;
}.rabbit .rabbit__tail:before {top: 0;left: -50%;
}.rabbit .rabbit__tail:after {top: 50%;left: 0;
}@-webkit-keyframes ear-left {0%, 20%, 100% {-webkit-transform: rotate(40deg);transform: rotate(40deg);}10%, 30%, 80% {-webkit-transform: rotate(45deg);transform: rotate(45deg);}90% {-webkit-transform: rotate(50deg);transform: rotate(50deg);}
}@keyframes ear-left {0%, 20%, 100% {-webkit-transform: rotate(40deg);transform: rotate(40deg);}10%, 30%, 80% {-webkit-transform: rotate(45deg);transform: rotate(45deg);}90% {-webkit-transform: rotate(50deg);transform: rotate(50deg);}
}@-webkit-keyframes ear-right {0%, 20%, 100% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}10%, 30%, 80% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}90% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes ear-right {0%, 20%, 100% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}10%, 30%, 80% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}90% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div>
</div>
<!-- partial -->
</body>
</html>
相关文章：
使用 CSS 变量更改多个元素样式
使用 CSS 变量更改多个元素样式 var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。 custom-property-name 是必需的, 自定义属性的名称，必需以 – 开头。 value 可选。备用值，在属性不存在的时候使…...
设计模式)
面试题(二十五)设计模式
1. 设计模式 1.1 说一说设计模式的六大原则 参考答案 单一职责原则 一个类，应当只有一个引起它变化的原因；即一个类应该只有一个职责。 就一个类而言，应该只专注于做一件事和仅有一个引起变化的原因，这就是所谓的单一职责原则…...
使用红黑树模拟实现map和set
在STL的源代码中，map和set的底层原理都是红黑树。但这颗红黑树跟我们单独写的红黑树不一样，它需要改造一下： 改造红黑树 节点的定义 因为map和set的底层都是红黑树。而且map是拥有键值对pair<K,V>的，而set是没有键值对&a…...
【django项目开发】用户登录后缓存权限到redis中（十）
这里写目录标题一、权限的数据的特点二、首先settings.py文件中配置redis连接redis数据库一、权限的数据的特点 需要去数据库中频繁的读和写，为了项目提高运行效率，可以把用户的权限在每次登录的时候都缓存到redis中。这样的话，权限判断的中…...
算法总结c++
文章目录基本概念时间复杂度空间复杂度基本结构1. 数组前缀和差分数组快慢指针(索引)左右指针（索引）盛水容器三数之和最长回文子串2. 链表双指针删除链表的倒数第 n 个结点翻转链表递归将两个升序链表合并为一个新的 升序 链表链表翻转3. 散列表twoSum无…...
Python 之 NumPy 切片索引和广播机制
文章目录一、切片和索引1. 一维数组2. 二维数组二、索引的高级操作1. 整数数组索引2. 布尔数组索引三、广播机制1. 广播机制规则2. 对于广播规则另一种简单理解一、切片和索引 ndarray 对象的内容可以通过索引或切片来访问和修改（），与 Pytho…...
Redis【包括Redis 的安装+本地远程连接】
Redis 一、为什么要用缓存？ 缓存定义 缓存是一个高速数据交换的存储器，使用它可以快速的访问和操作数据。 程序中的缓存 在我们程序中，如果没有使用缓存，程序的调用流程是直接访问数据库的； 如果多个程序调用一个数…...
深度学习训练营_第P3周_天气识别
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍦 参考文章：Pytorch实战 | 第P3周：彩色图片识别：天气识别**🍖 原作者：K同学啊|接辅导、项目定制**␀ 本次实验有两个新增任务&…...
“华为杯”研究生数学建模竞赛2006年-【华为杯】C题：维修线性流量阀时的内筒设计问题（附获奖论文及matlab代码）
赛题描述 油田采油用的油井都是先用钻机钻几千米深的孔后，再利用固井机向四周的孔壁喷射水泥砂浆得到水泥井管后形成的。固井机上用来控制砂浆流量的阀是影响水泥井管质量的关键部件，但也会因磨损而损坏。目前我国还不能生产完整的阀体，固井机仍依赖进口。由于损坏的内筒已…...
数据结构：带环单链表基础OJ练习笔记(leetcode142. 环形链表 II)(leetcode三题大串烧)
目录 一.前言 二.leetcode160. 相交链表 1.问题描述 2.问题分析与求解 三.leetcode141. 环形链表 1.问题描述 2.代码思路 3.证明分析 下一题会用到的重要小结论： 四.leetcode142. 环形链表 II 1.问题描述 2.问题分析与求解 Judgecycle接口…...
数模美赛如何找数据 | 2023年美赛数学建模必备数据库
2023美赛资料分享/思路答疑群：322297051 欧美相关统计数据（一般美赛这里比较多） 1、http://www.census.gov/ 美国统计局（统计调查局或普查局）官方网站 The Census Bureau Web Site provides on-line access to our …...
SSTI漏洞原理及渗透测试
模板引擎（Web开发中） 是为了使 用户界面 和 业务数据（内容）分离而产生的，它可以生成特定格式的文档， 利用模板引擎来生成前端的HTML代码，模板引擎会提供一套生成HTML代码的程序，之后…...
【算法基础】高精度除法
👦个人主页：Weraphael ✍🏻作者简介：目前是C语言 算法学习者 ✈️专栏：【C/C】算法 🐋 希望大家多多支持，咱一起进步！😁 如果文章对你有帮助的话 欢迎 评论💬…...
, loss.backward(), optimizer.step()的理解及使用)
optimizer.zero_grad(), loss.backward(), optimizer.step()的理解及使用
optimizer.zero_grad，loss.backward，optimizer.step用法介绍optimizer.zero_grad()：loss.backward()：optimizer.step()：用法介绍 这三个函数的作用是将梯度归零（optimizer.zero_grad()）&#x…...
融资、量产和一栈式布局，这家Tier 1如此备战高阶智驾决赛圈
作者 | Bruce 编辑 | 于婷从早期的ADAS，到高速/城市NOA，智能驾驶的竞争正逐渐升级，这对于车企和供应商的核心技术和产品布局都是一个重要的考验。 部分智驾供应商已经在囤积粮草，响应变化。 2023刚一开年，智能驾驶领域…...
centos7.8安装oralce11g
文章目录环境安装文件准备添加用户操作系统环境配置解压安装问题解决创建用户远程连接为了熟悉rman备份操作，参照大神的博客在centos中安装了一套oracle11g，将安装步骤记录如下环境安装文件准备 这里准备一台centos7.8 虚拟机 配置ip 192.168.18.100 主…...
【蓝桥杯集训·每日一题】AcWing 3956. 截断数组
文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维前缀和一、题目 1、原题链接 3956. 截断数组 2、题目描述 给定一个长度为 n 的数组 a1,a2,…,an。 现在，要将该数组从中间截断，得到三个非空子…...
万丈高楼平地起：Linux常用命令
目录 系统管理命令 man命令 ls命令 cd命令 useradd命令 passwd命令 free命令 whoami命令 ps命令 date命令 pwd命令 shutdown命令 文件目录管理命令 touch命令 cat命令 mkdir命令 rm命令 cp命令 mv命令 find命令 more指令 less指令 head指令 tail指令 …...
Linux（Linux的连接使用）
连接Linux我们一般使用CRT或者Xshell工具进行连接使用。 如CRT使用SSH的方式 输出主机，账户，密码那些就可以连接上了。 Linux系统是一个文件型操作系统，有一句话说Linux的一切皆是文件。Linux系统的启动大致有下面几个步骤 Linux系统有7个运…...
Unity中画2D图表（2）——用XChart包绘制散点分布图 + 一条直线方程
散点图用于显示关系。 对于 【相关性】 ，散点图有助于显示两个变量之间线性关系的强度。 对于 【回归】 ，散点图常常会添加拟合线。 举例1：你可以展示【年降雨量】与【玉米亩产量】的关系 举例2：你也可以分析各个【节假日】与【大…...
给 Agent 用的搜索：Cloudflare AI Search 是什么，怎么工作的
原文：AI Search: the search primitive for your agents 发布时间：2026 年 4 月 16 日 作者：Gabriel Massadas、Miguel Cardoso、Anni Wang 每个 Agent 都需要搜索，但自己搭很麻烦 编码 Agent 要检索数百万个文件，客服…...
构建现代化图片编辑器的Vue与Fabric.js实践指南
构建现代化图片编辑器的Vue与Fabric.js实践指南 【免费下载链接】vue-fabric-editor 快图设计-基于fabric.js和Vue的开源图片编辑器，可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates. 项…...
模块化前端框架设计：从原子状态到组合式架构的工程实践
1. 项目概述：一个轻量级、模块化的现代Web应用框架最近在梳理手头的几个前端项目，发现随着功能迭代，代码越来越臃肿，不同项目间的基础工具函数、状态管理逻辑、路由配置总是要重新写一遍，或者复制粘贴，维护…...
Adams驱动函数里那个神秘的‘d’到底怎么用？手把手教你避开单位换算的坑
Adams驱动函数中‘d’符号的终极指南：从原理到实战避坑 刚接触Adams的工程师们，你们是否曾在深夜盯着屏幕上那个诡异的机械臂运动轨迹百思不得其解？明明输入的是90度，为什么模型转得像陀螺一样疯狂？这一切的罪魁祸首很…...
终极指南：如何使用qmcdump轻松解密QQ音乐加密音频文件
终极指南：如何使用qmcdump轻松解密QQ音乐加密音频文件 【免费下载链接】qmcdump 一个简单的QQ音乐解码（qmcflac/qmc0/qmc3 转 flac/mp3），仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump 你是否…...
后端开发必看：设计高并发系统时，如何估算你的RTT和时延带宽积？
高并发系统设计实战：从RTT到时延带宽积的性能优化指南 在分布式系统的世界里，网络性能指标往往成为制约整体吞吐量的隐形瓶颈。我曾亲眼见证过一个日活百万的社交平台，因为微服务间调用的RTT估算偏差，导致高峰期请求堆积如山的惨状…...
Linux调试利器：用addr2line精准定位程序崩溃现场
1. 当程序崩溃时，我们该如何快速定位问题？ 作为一名长期奋战在Linux开发一线的程序员，我最头疼的就是遇到程序突然崩溃的情况。那种看着终端输出"Segmentation fault (core dumped)"却无从下手的无力感，相信很多开发者都…...
Agent设计模式全景图——从ReAct到Multi-Agent的完整知识体系
Agent概念在2023年就已出现，2024年是框架快速迭代的一年。到了2026年，Agent设计模式逐渐成熟，成为工程实践的关键。 GitHub上关于Agent的开源项目突破10万个，LangChain、LangGraph、AutoGen、CrewAI……框架层出不穷。但翻遍这些文…...
从Distributed到Lumped：三种SPEF寄生模型，你的芯片时序分析该选哪一个？
芯片时序分析中的SPEF模型选择：精度与效率的终极权衡 在28nm以下工艺节点，互连线寄生效应导致的时序偏差可能占到整体时钟周期的30%以上。面对动辄数千万个net的现代SoC设计，工程师们不得不在模型精度与运行时间之间做出艰难抉择。就像一位资…...
HTML5 教程
HTML5 教程 引言 HTML5，作为现代网页开发的核心技术之一，自从推出以来就受到了广泛的关注和认可。它不仅改进了原有的HTML特性，还引入了新的元素和API，使得网页设计和开发更加高效、强大。本教程旨在为您提供一个全面的HTML5学习路径，帮助您快速掌握HTML5的基础知识和高…...