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

最新推荐文章于 2024-06-19 10:49:31 发布
最新推荐文章于 2024-06-19 10:49:31 发布
阅读量804 收藏 2
点赞数 2
分类专栏： CSS 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blbyu/article/details/129019520
版权

使用 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>

在这里插入图片描述

慕斯-ing
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
通过CSS变量修改样式的方法示例
12-13
问题 js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。 那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。 示例：改变div的hover背景色 <!-- css --> <style type="text/css"> :root { --divHoverColor: red; } div { width: 100px; height: 100px; background: bis
Jquery使用css方法改变样式实例
12-10
在jQuery中，`css()`方法用于获取或设置一个或多个CSS属性值。它有两种形式： 1. **设置样式**：当你向`css()`方法传入两个参数时，第一个参数是CSS属性名，第二个参数是属性值。例如： ```javascript $("#...
如何通过CSS变量修改样式的方法
hdxx2022的博客
08-16 392
但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。本文主要介绍了通过CSS变量修改样式的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。 : 自定义属性名。以上就是本文的全部内容，希望对大家的学习有所帮助。示例：改变div的hover背景色。注意：属性名是不能使用变量的。使用@support检测。
怎么根据变量控制这样式
最新发布
weixin_53509819的博客
06-19 239
如果你正在使用React、Vue、Angular等JavaScript框架或库，它们通常有自己的方法来根据状态或变量来动态地应用样式。在CSS中，你不能直接根据JavaScript的变量值来改变样式，但你可以通过几种方法间接地实现这一点。你可以使用JavaScript（或更现代的库如jQuery）来直接修改DOM元素的样式。你可以预定义一些CSS类，并在JavaScript中根据变量的值来添加或删除这些类。属性，从而应用内联样式。这是因为CSS变量的值应该是有效的CSS值，而你的。的值作为颜色，而是根据。
CSS变量的声明和修改
记得抬头微笑
04-15 1965
CSS变量的使用CSS变量描述CSS变量的声明CSS变量的使用CSS变量的修改 CSS变量描述 复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。 CSS变量的声明 CSS 变量的声明一般都是在根元素上面声明，确保根元素下的所有元素都可以访问到这个CSS 的自定义属性。这里根元素使用 :root 来表示，也可以在其他
css——应用多个样式
weixin_30548917的博客
05-27 199
应用多个样式 在class中使用多个样式 在这是会有优先级关系问题 在上面的代码中，aa,bb,中的颜色会有冲突，到底显示的结果会是黄色还是绿色呢？ 结果是绿色的。它是以程序执行的先后为优先级，后执行>先执行，后执行的会把前面的重复的覆盖，上面的代码中aa先执行，所以bb优先，color选择绿色 如果将<p>中的aa,bb,改掉是不会影响结果的。 结果...
css多重样式
eadela的博客
12-04 468
backgruound https://www.cnblogs.com/darcrand-blog/p/5770181.html https://blog.csdn.net/jiangxindu1/article/details/39802187 https://blog.csdn.net/MyJDL/article/details/51935259?utm_source=blogxgwz3 https://blog.csdn.net/zw217520/article/details/1024855
通过CSS变量修改样式
weixin_34358365的博客
02-03 914
问题： js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。 那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。 示例： 改变div的hover背景色 &lt;!-- css --&gt; &lt;style type="text/css"&gt; :root { ...
原生js更改css样式的两种方式
10-20
首先在CSS样式表中定义一个或多个类，然后在JavaScript中通过更改元素的`className`属性，添加或移除这些类来应用样式。例如： ```css /* CSS 样式表 */ .active { background-color: blue; } ``` ```...
jQuery CSS()方法改变现有的CSS样式
12-09
jQuery入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。...如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法。 var mycss = { background: '#EEE', w
只使用一个html元素css绘制各种图形
08-10
此外，CSS变量（`var()`）和 calc() 函数也是现代CSS中的利器，它们能帮助我们动态计算和设置尺寸，使得图形的响应式设计变得更加容易。例如，可以定义一个变量来保存元素的宽度，然后在其他属性中引用它，这样在...
layui弹出层样式修改，使用css的background属性设置多个背景图附件
02-24
本话题将详细探讨如何在layui中修改弹出层的样式，特别是如何使用CSS的`background`属性来设置多个背景图片。 首先，我们需要理解layui弹出层的工作原理。layui的弹出层是通过JavaScript动态生成HTML元素实现的，...
css() 方法返回或设置匹配的元素的一个或多个样式属性。
10-10 243
css() 方法返回或设置匹配的元素的一个或多个样式属性。 1.返回css属性值 $(selector).css(name) name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。 例子：$("p").css("color"); 2.设置一个css属性 $(selector).css(name,value) ...
css中多个样式的应用的微妙问题。
Notheror的博客
04-29 496
我的前端之路，急难千金方（个人版/滑稽脸）---------- 今天在写一个小功能时候 发现了一个css的class 类集合的问题 众所周知，当一个盒子需要应用多个样式时我们可以直接在class=""内部用空格连接。比如样式A和B 同时应用到盒子内部 写为 class =“A B”. but,话不多说直接上图演示 接下来我在我的P标签内选择引入 看一眼效果 要不写成个数组？ 然后问题来...
CSS变量之var()函数的应用——动态修改样式 & root的使用
weixin_44867717的博客
04-08 6086
CSS变量之var()函数的应用——动态修改样式 & :root的使用 一、css变量 body { --foo: #7F593F; --urls: './img/xxx.jpg'; } 如上述代码，意思为：在body选择器里面声明了两个变量：–foo 和 –bar； css声明变量不像Less的@foo， 也不像sass的$foo，而是采取了不同形式的–foo，声明出来的变量和color、background-url 等正式属性没有什么不同 ，所以 CSS 变量又叫做**“CSS 自定义
修改 css变量,通过CSS变量修改样式的方法示例
weixin_28693683的博客
08-03 737
问题js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。那么这里再来一种方法，设置css变量(var)，通过js去改变这个变量来实现。示例：改变div的hover背景色:root {--divHoverColor: red;}div {width: 100px;height: 100px;backgrou...
动态改变scss样式变量
weixin_50238536的博客
09-08 1753
export {
css变量（JavaScript修改css变量）
我是小妖yun的博客
06-21 623
一 变量的声明 声明变量的时候，变量名前面要加两根连词线（–）。 :root { --font-size: 14px; } body { --color: #FFFFFF; --border-color: #EDEDED; } 二 var()函数 var()函数用于读取变量。 .box { color: var(--color); border: 1px solid var(--border-color); } var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就
CSS:一个元素同时具有两个样式 <div class="a b"> </div>
tiandaochouqin_1的博客
03-03 3721
&lt;div class="a b"&gt; &lt;/div&gt; 即div同时具有a、b样式，先执行a，再加上b
css中的var变量
09-07
CSS中的var()函数用于定义和使用自定义变量。它允许你在CSS中声明一个变量，并在需要的地方使用这个变量的值。 使用 var() 函数可以通过声明和定义自定义属性来创建变量。具体的语法如下： ``` --variable-name: value; ``` 在这个语法中，`--variable-name` 是变量的名称，`value` 是变量的值。 要在CSS中使用这个变量，可以通过 var() 函数引用它。具体的语法如下： ``` property: var(--variable-name); ``` 在这个语法中，`property` 是 CSS 属性，`--variable-name` 是之前定义的变量名称。 举个例子，假设你想要定义一个名为 `--main-color` 的变量，并将其应用于背景颜色属性。你可以这样写： ```css :root { --main-color: #ff0000; } body { background-color: var(--main-color); } ``` 这样，整个页面的背景颜色就会应用为红色（#ff0000），因为我们使用了 `--main-color` 这个变量。 使用自定义变量可以方便地调整和更改多个元素的样式，而无需逐个修改每个元素的属性值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕斯-ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值