当前位置： 首页 > news >正文

使用 CSS 变量更改多个元素样式

news 2025/7/7 13:51:26

使用 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() 函数用于插入自定义的属性值&#xff0c;如果一个属性值在多处被使用&#xff0c;该方法就很有用。 custom-property-name 是必需的, 自定义属性的名称&#xff0c;必需以 – 开头。 value 可选。备用值&#xff0c;在属性不存在的时候使…...

编程日记 2023/5/24 19:54:45

面试题(二十五)设计模式

1. 设计模式 1.1 说一说设计模式的六大原则 参考答案 单一职责原则 一个类&#xff0c;应当只有一个引起它变化的原因&#xff1b;即一个类应该只有一个职责。 就一个类而言&#xff0c;应该只专注于做一件事和仅有一个引起变化的原因&#xff0c;这就是所谓的单一职责原则…...

编程日记 2023/5/29 4:42:47

使用红黑树模拟实现map和set

在STL的源代码中&#xff0c;map和set的底层原理都是红黑树。但这颗红黑树跟我们单独写的红黑树不一样&#xff0c;它需要改造一下&#xff1a; 改造红黑树 节点的定义 因为map和set的底层都是红黑树。而且map是拥有键值对pair<K,V>的&#xff0c;而set是没有键值对&a…...

编程日记 2023/5/10 5:46:20

【django项目开发】用户登录后缓存权限到redis中（十）

这里写目录标题一、权限的数据的特点二、首先settings.py文件中配置redis连接redis数据库一、权限的数据的特点 需要去数据库中频繁的读和写&#xff0c;为了项目提高运行效率&#xff0c;可以把用户的权限在每次登录的时候都缓存到redis中。这样的话&#xff0c;权限判断的中…...

编程日记 2023/5/11 6:39:19

算法总结c++

文章目录基本概念时间复杂度空间复杂度基本结构1. 数组前缀和差分数组快慢指针(索引)左右指针&#xff08;索引&#xff09;盛水容器三数之和最长回文子串2. 链表双指针删除链表的倒数第 n 个结点翻转链表递归将两个升序链表合并为一个新的 升序 链表链表翻转3. 散列表twoSum无…...

编程日记 2023/5/13 20:31:38

Python 之 NumPy 切片索引和广播机制

文章目录一、切片和索引1. 一维数组2. 二维数组二、索引的高级操作1. 整数数组索引2. 布尔数组索引三、广播机制1. 广播机制规则2. 对于广播规则另一种简单理解一、切片和索引 ndarray 对象的内容可以通过索引或切片来访问和修改&#xff08;&#xff09;&#xff0c;与 Pytho…...

编程日记 2023/5/21 17:28:44

Redis【包括Redis 的安装+本地远程连接】

Redis 一、为什么要用缓存&#xff1f; 缓存定义 缓存是一个高速数据交换的存储器&#xff0c;使用它可以快速的访问和操作数据。 程序中的缓存 在我们程序中&#xff0c;如果没有使用缓存&#xff0c;程序的调用流程是直接访问数据库的&#xff1b; 如果多个程序调用一个数…...

编程日记 2023/3/21 1:01:22

深度学习训练营_第P3周_天气识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f366; 参考文章&#xff1a;Pytorch实战 | 第P3周&#xff1a;彩色图片识别&#xff1a;天气识别**&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制**␀ 本次实验有两个新增任务&…...

编程日记 2023/5/21 17:42:13

“华为杯”研究生数学建模竞赛2006年-【华为杯】C题：维修线性流量阀时的内筒设计问题（附获奖论文及matlab代码）

赛题描述 油田采油用的油井都是先用钻机钻几千米深的孔后，再利用固井机向四周的孔壁喷射水泥砂浆得到水泥井管后形成的。固井机上用来控制砂浆流量的阀是影响水泥井管质量的关键部件，但也会因磨损而损坏。目前我国还不能生产完整的阀体，固井机仍依赖进口。由于损坏的内筒已…...

编程日记 2023/5/26 10:27:42

数据结构：带环单链表基础OJ练习笔记(leetcode142. 环形链表 II)(leetcode三题大串烧)

目录 一.前言 二.leetcode160. 相交链表 1.问题描述 2.问题分析与求解 三.leetcode141. 环形链表 1.问题描述 2.代码思路 3.证明分析 下一题会用到的重要小结论&#xff1a; 四.leetcode142. 环形链表 II 1.问题描述 2.问题分析与求解 Judgecycle接口&#xf…...

编程日记 2023/5/29 4:45:24

数模美赛如何找数据 | 2023年美赛数学建模必备数据库

2023美赛资料分享/思路答疑群&#xff1a;322297051 欧美相关统计数据&#xff08;一般美赛这里比较多&#xff09; 1、http://www.census.gov/ 美国统计局&#xff08;统计调查局或普查局&#xff09;官方网站 The Census Bureau Web Site provides on-line access to our …...

编程日记 2023/4/26 5:30:29

SSTI漏洞原理及渗透测试

模板引擎&#xff08;Web开发中&#xff09; 是为了使 用户界面 和 业务数据&#xff08;内容&#xff09;分离而产生的&#xff0c;它可以生成特定格式的文档&#xff0c; 利用模板引擎来生成前端的HTML代码&#xff0c;模板引擎会提供一套生成HTML代码的程序&#xff0c;之后…...

编程日记 2023/5/21 17:48:40

【算法基础】高精度除法

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前是C语言 算法学习者 ✈️专栏&#xff1a;【C/C】算法 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac…...

编程日记 2023/5/9 10:52:18

optimizer.zero_grad(), loss.backward(), optimizer.step()的理解及使用

optimizer.zero_grad&#xff0c;loss.backward&#xff0c;optimizer.step用法介绍optimizer.zero_grad()&#xff1a;loss.backward()&#xff1a;optimizer.step()&#xff1a;用法介绍 这三个函数的作用是将梯度归零&#xff08;optimizer.zero_grad()&#xff09;&#x…...

编程日记 2023/5/27 13:35:25

融资、量产和一栈式布局，这家Tier 1如此备战高阶智驾决赛圈

作者 | Bruce 编辑 | 于婷从早期的ADAS&#xff0c;到高速/城市NOA&#xff0c;智能驾驶的竞争正逐渐升级&#xff0c;这对于车企和供应商的核心技术和产品布局都是一个重要的考验。 部分智驾供应商已经在囤积粮草&#xff0c;响应变化。 2023刚一开年&#xff0c;智能驾驶领域…...

编程日记 2023/5/6 2:02:23

centos7.8安装oralce11g

文章目录环境安装文件准备添加用户操作系统环境配置解压安装问题解决创建用户远程连接为了熟悉rman备份操作&#xff0c;参照大神的博客在centos中安装了一套oracle11g&#xff0c;将安装步骤记录如下环境安装文件准备 这里准备一台centos7.8 虚拟机 配置ip 192.168.18.100 主…...

编程日记 2023/5/8 7:20:28

【蓝桥杯集训·每日一题】AcWing 3956. 截断数组

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维前缀和一、题目 1、原题链接 3956. 截断数组 2、题目描述 给定一个长度为 n 的数组 a1,a2,…,an。 现在&#xff0c;要将该数组从中间截断&#xff0c;得到三个非空子…...

编程日记 2023/5/22 15:18:26

万丈高楼平地起：Linux常用命令

目录 系统管理命令 man命令 ls命令 cd命令 useradd命令 passwd命令 free命令 whoami命令 ps命令 date命令 pwd命令 shutdown命令 文件目录管理命令 touch命令 cat命令 mkdir命令 rm命令 cp命令 mv命令 find命令 more指令 less指令 head指令 tail指令 …...

编程日记 2023/5/14 6:05:58

Linux（Linux的连接使用）

连接Linux我们一般使用CRT或者Xshell工具进行连接使用。 如CRT使用SSH的方式 输出主机&#xff0c;账户&#xff0c;密码那些就可以连接上了。 Linux系统是一个文件型操作系统&#xff0c;有一句话说Linux的一切皆是文件。Linux系统的启动大致有下面几个步骤 Linux系统有7个运…...

编程日记 2023/5/8 6:20:10

Unity中画2D图表（2）——用XChart包绘制散点分布图 + 一条直线方程

散点图用于显示关系。 对于 【相关性】 &#xff0c;散点图有助于显示两个变量之间线性关系的强度。 对于 【回归】 &#xff0c;散点图常常会添加拟合线。 举例1&#xff1a;你可以展示【年降雨量】与【玉米亩产量】的关系 举例2&#xff1a;你也可以分析各个【节假日】与【大…...

编程日记 2023/5/12 6:59:58

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/7/5 18:36:22

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/7/5 22:11:12

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/7/6 2:30:53

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/7/5 11:56:12

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/7/6 7:58:23

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/6/16 10:20:03

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/7/7 5:34:17

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/6/15 15:25:21

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/7/5 3:40:40