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

Posted 慕斯-ing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 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 多个关键帧变形如何衔接

仅使用 css 更改多个元素的样式

CSS3 的按钮怎么快速实现样式

CSS3之过渡

关于使用CSS3实现元素样式过渡的解决方案

CSS3 - 聚焦父元素的样式[重复]