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

向右看齐 2023-09-24 18:10 19阅读 0赞

# 使用 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>
    
    <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>
    
    </body>
    </html>

![在这里插入图片描述][97844b49ff7c4edf841caf1b59e2aebb.png]

[97844b49ff7c4edf841caf1b59e2aebb.png]: https://img-blog.csdnimg.cn/97844b49ff7c4edf841caf1b59e2aebb.png