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

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

news 文章来源：https://blog.csdn.net/blbyu/article/details/129019520 2024/11/26 17:26:23

使用 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 可选。备用值，在属性不存在的时候使…...

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

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

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

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

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

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

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

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

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

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

算法总结c++

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

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

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

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

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

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

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

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

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

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍦 参考文章：Pytorch实战 | 第P3周：彩色图片识别：天气识别**🍖 原作者：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.证明分析下一题会用到的重要小结论： 四.leetcode142. 环形链表 II 1.问题描述 2.问题分析与求解 Judgecycle接口&#xf…...

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

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

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

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

SSTI漏洞原理及渗透测试

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

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

【算法基础】高精度除法

👦个人主页：Weraphael ✍🏻作者简介：目前是C语言算法学习者 ✈️专栏：【C/C】算法 🐋 希望大家多多支持，咱一起进步！😁 如果文章对你有帮助的话欢迎评论&#x1f4ac…...

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

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…...

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

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

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

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

centos7.8安装oralce11g

文章目录环境安装文件准备添加用户操作系统环境配置解压安装问题解决创建用户远程连接为了熟悉rman备份操作，参照大神的博客在centos中安装了一套oracle11g，将安装步骤记录如下环境安装文件准备这里准备一台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。现在，要将该数组从中间截断，得到三个非空子…...

编程日记 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的方式输出主机，账户，密码那些就可以连接上了。 Linux系统是一个文件型操作系统，有一句话说Linux的一切皆是文件。Linux系统的启动大致有下面几个步骤 Linux系统有7个运…...

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

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

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

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

Go 排序包 sort

写在前面的使用总结： 排序结构体实现Len，Less，Swap三个函数 package main import ( "fmt" "sort") type StuScore struct { name string score int } type StuScores []StuScore func (s StuScores) Len(…...

编程日记 2023/5/25 5:16:07

Java Email 发HTML邮件工具采用 freemarker模板引擎渲染

Java Email 发HTML邮件工具采用 freemarker模板引擎 1.常用方式对比 Java发送邮件有很多的实现方式第一种：Java 原生发邮件mail.jar和activation.jar  <dependency><groupId>jav…...

编程日记 2023/5/22 10:29:06

CNI 网络流量分析（六）Calico 介绍与原理（二）

文章目录CNI 网络流量分析（六）Calico 介绍与原理（二）CNIIPAM指定 IP指定非 IPAM IPCNI 网络流量分析（六）Calico 介绍与原理（二） CNI 支持多种 datapath，默认是 linuxDa…...

编程日记 2023/5/26 3:08:30

短视频标题的几种类型和闭坑注意事项

目录短视频标题的几种类型 1、悬念式 2、蹭热门式 3、干货式 4、对比式方法 5、总分/分总式方法 6、挑战式方式 7、启发激励式 8、讲故事式 02注意事项 1、避免使用冷门、生僻词汇标题是点睛之笔，核心是视频内容短视频标题的几种类型 1、悬念式通过…...

编程日记 2023/5/9 8:03:28

操作系统——1.操作系统的概念、定义和目标

目录 1.概念 1.1 操作系统的种类 1.2电脑的组成 1.3电脑组成的介绍 1.4操作系统的概念（定义） 2.操作系统的功能和目标 2.1概述 2.2 操作系统作为系统资源的管理者 2.3 操作系统作为用户和计算机硬件间的接口 2.3.1用户接口的解释 2.3.2 GUI 2.3.3接…...

编程日记 2023/5/30 7:09:18

【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能

前言这是html版本的。只是引用了vue的语法。这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发这就导致有些vue上很简单的功能。放到这里需要转换一下以前写过一个vue版本的帖子，现在再加一个html版本的。另一个vue版本…...

编程日记 2023/5/8 10:15:48

2023新华为OD机试题 - 计算网络信号（JavaScript） | 刷完必过

计算网络信号题目网络信号经过传递会逐层衰减，且遇到阻隔物无法直接穿透，在此情况下需要计算某个位置的网络信号值。注意:网络信号可以绕过阻隔物 array[m][n] 的二维数组代表网格地图，array[i][j] = 0代表 i 行 j 列是空旷位置;array[i][j] = x(x 为正整数)代表 i 行 …...

编程日记 2023/5/6 0:49:52

文章目录27 Architecures for the Edge 边缘系统的架构27.1 The Ecosystem of Edge-Dominant Systems 边缘主导系统的生态系统27.2 Changes to the Software Development Life Cycle 软件开发生命周期的变化27.3 Implications for Architecture 对架构的影响27.4 Implications …...

编程日记 2023/5/23 16:02:22

机器学习强基计划8-1：图解主成分分析PCA算法(附Python实现)

目录0 写在前面1 为什么要降维？2 主成分分析原理3 PCA与SVD的联系4 Python实现0 写在前面机器学习强基计划聚焦深度和广度，加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后的数学原理；“广”在分析多个机器学习模型&#xf…...

编程日记 2023/4/23 4:06:56

Hudi-集成Spark之spark-shell 方式

Hudi集成Spark之spark-shell 方式启动 spark-shell （1）启动命令 #针对Spark 3.2 spark-shell \--conf spark.serializerorg.apache.spark.serializer.KryoSerializer \--conf spark.sql.catalog.spark_catalogorg.apache.spark.sql.hudi.catalog.Hoo…...

编程日记 2023/5/24 1:11:56

做海淘网站赚钱吗/如何做公司网站推广

原文地址：Why is Front-End Development So Unstable?原文作者：Jimmy Breck-McKye译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m…译者：Colafornia校对者：geniusq1981 sunhaokk我们都知道这样…...

编程日记 2024/11/26 16:02:14

wordpress与dede哪个好用/网络营销案例题

通过DevExpress WPF Controls，你能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品，还是以数据为中心的商业智能产品，都能通过De…...

编程日记 2024/11/26 15:41:55

wordpress mobile 主题/苏州关键词优化软件

(1) 进入目录手动删除 configure作用:是源码安装软件时配置环境用的他根据你的配置选项和你的系统情况生成makefile文件为make 做准备最常用的参数: ./configure --prefix 作用:不指定prefix，则可执行文件默认放在/usr/local/bin，库文件默认放在/usr/…...

编程日记 2024/11/26 15:20:44