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

news2024/11/24 4:26:32

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/344127.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

牛客网Python篇数据分析习题（六）

牛客网Python篇数据分析习题（六）

1.某公司计划举办一场运动会&#xff0c;现有运动会项目数据集items.csv。 包含以下字段&#xff1a; item_id&#xff1a;项目编号&#xff1b; item_name:项目名称&#xff1b; location:比赛场地。 有员工报名情况数据集signup.csv。包含以下字段&#xff1a; employee_id&a…
阅读更多...
高性能（二）

高性能（二）

三、读写分离和分库分表 1.读写分离 1.1 概述 将数据库的读写操作分散到不同的数据库节点上 通常一主多从一台主数据库负责写&#xff0c;多台从数据库负责读。 主库和从库之间会进行数据同步&#xff0c;以保证从库中数据的准确性。 1.2 问题及解决 1.2.1 问题 主从同…
阅读更多...
ChatGPT眼中的产品经理是这样的

ChatGPT眼中的产品经理是这样的

在玩ChatGPT的时候&#xff0c;突发奇想&#xff0c;ChatGPT对产品经理的认知是啥样呢&#xff1f;于是我找了几个大家都比较关注的产品经理问题&#xff0c;看看ChatGPT是如何回答的。1、产品经理可以干一辈子嘛&#xff1f;2、产品经理的核心竞争力是啥&#xff1f;3、产品经…
阅读更多...
【本周特惠课程】深度学习6大模型部署场景(Pytorch+NCNN+MNN+Tengine+TensorRT+微信小程序)速成！...

【本周特惠课程】深度学习6大模型部署场景(Pytorch+NCNN+MNN+Tengine+TensorRT+微信小程序)速成！...

前言欢迎大家关注有三AI的视频课程系列&#xff0c;我们的视频课程系列共分为5层境界&#xff0c;内容和学习路线图如下&#xff1a;第1层&#xff1a;掌握学习算法必要的预备知识&#xff0c;包括Python编程&#xff0c;深度学习基础&#xff0c;数据使用&#xff0c;框架使用…
阅读更多...
操作系统——1.操作系统的概念、定义和目标

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

目录 1.概念 1.1 操作系统的种类 1.2电脑的组成 1.3电脑组成的介绍 1.4操作系统的概念&#xff08;定义&#xff09; 2.操作系统的功能和目标 2.1概述 2.2 操作系统作为系统资源的管理者 2.3 操作系统作为用户和计算机硬件间的接口 2.3.1用户接口的解释 2.3.2 GUI 2.3.3接…
阅读更多...
代码随想录第十一天（459）

代码随想录第十一天（459）

文章目录459. 重复的子字符串答案思路暴力破解移动匹配459. 重复的子字符串 也不知道为啥这个提示简单题…… 答案思路 暴力破解 例如&#xff1a;abcabc 移位一次&#xff1a;cabcab 移位两次&#xff1a;bcabca 移位三次&#xff1a;abcabc 现在字符串和原字符串匹配了…
阅读更多...
搭建Vue版Ant Design Pro后台管理系统

搭建Vue版Ant Design Pro后台管理系统

搭建Vue版Ant Design Pro后台管理系统 此文章通过基于Vue实现的Ant DesignPro脚手架快速构建一个后台管理系统的前端 相关文档链接 1、【Ant Design Pro of Vue 官方文档】2、【Vue 官方文档】3、【Vue Router 官方文档】 Ant Design Pro相关系列文章&#xff1a; 一、AntDesig…
阅读更多...
Ansible中常用的模块

Ansible中常用的模块

目录 一、Ansible Ad-Hoc命令集 1 Ad-hoc 使用场景 2 Ansible的并发特性 3 Ansible-doc用法 4 ansible命令运行方式及常用参数 5 ansible的基本颜色代表 6 ansible中的常用模块 command模块 shell模块 script模块 copy模块 fetch模块 unarchive模块 archive模块…
阅读更多...
Spring3之控制反转(IOC)

Spring3之控制反转(IOC)

简介 控制反转(Inversion of Control, 缩写为IoC), 是面向对象编程中的一种设计原则, 可以用来减低计算机代码之间的耦合度;其中最常见的方式叫做依赖注入(Dependency Injection, 简称DI), 还有一种方式叫 “赖查找” (Dependency Lookup); 通过控制反转, 对象在被创建的时候,…
阅读更多...
CData Drivers for Acumatica

CData Drivers for Acumatica

CData Drivers for Acumatica Acumatica的CData驱动程序为用户提供了使用AcumaticaERP数据的便捷途径&#xff0c;该数据来自商业智能、分析、定制应用程序、报告以及ETL。通过JDBC、ADO.NET和ODBC等标准驱动程序&#xff0c;以及与PowerShell、Power BI、Excel、SSIS等流行应用…
阅读更多...
java微信小程序音乐播放器分享系统

java微信小程序音乐播放器分享系统

随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时进行音乐播放器小程序的数据信息管理,特开发了基于音乐播放器小程序…
阅读更多...
计算之变：联想问天给中国智能IT基础设施划下新起点

计算之变：联想问天给中国智能IT基础设施划下新起点

“冥昭瞢暗&#xff0c;谁能极之&#xff1f;冯翼惟象&#xff0c;何以识之&#xff1f;”屈原在《天问》中喊出了心中的困惑&#xff0c;用无数个问题&#xff0c;展现了中国人对世界的探索精神和好奇心。人对时空无限性的追问&#xff0c;伴随的是对有限性的焦灼感。幸好&…
阅读更多...
JZ50、JZ57、JZ56

JZ50、JZ57、JZ56

文章目录JZ50 第一个只出现一次的字符题目描述&#xff1a;具体实现&#xff1a;JZ57 和为S的两个数字题目描述&#xff1a;具体实现&#xff1a;JZ56 数组中只出现一次的两个数字题目描述具体实现&#xff1a;JZ50 第一个只出现一次的字符 题源 &#x1f449; 第一个只出现一…
阅读更多...
在线预览PDF文件、图片，并且预览地址不显示文件或图片的真实路径。

在线预览PDF文件、图片，并且预览地址不显示文件或图片的真实路径。

实现在线预览PDF文件、图片&#xff0c;并且预览地址不显示文件或图片的真实路径。1、vue使用blob流在线预览PDF、图片&#xff08;包括jpg、png等格式&#xff09;。1、按钮的方法&#xff1a;2、方法详细&#xff1a;&#xff08;此方法可以在发起请求时携带token&#xff0c…
阅读更多...
Data2Vec：视觉、语音和语言的语境化目标表征的高效自监督学习

Data2Vec：视觉、语音和语言的语境化目标表征的高效自监督学习

Efficient Self-supervised Learning with Contextualized Target Representations for Vision, Speech and Language &#xff08;视觉、语音和语言的语境化目标表征的高效自监督学习&#xff09; 论文&#xff1a;efficient-self-supervised-learning-with-contextualized-t…
阅读更多...
【Hello Linux】Linux工具介绍 （gcc/g++ gdb）

【Hello Linux】Linux工具介绍 （gcc/g++ gdb）

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;介绍Linux的常用工具gcc/g 以及gbd Linux工具介绍gcc / ggcc / g的作用为什么语言要经过这四步才能变为可执行指令gcc / g语法预处理编…
阅读更多...
机器学习强基计划8-1：图解主成分分析PCA算法(附Python实现)

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

目录0 写在前面1 为什么要降维&#xff1f;2 主成分分析原理3 PCA与SVD的联系4 Python实现0 写在前面 机器学习强基计划聚焦深度和广度&#xff0c;加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后的数学原理&#xff1b;“广”在分析多个机器学习模型&#xf…
阅读更多...
MATLAB | 情人节来绘制更立体的玫瑰花吧

MATLAB | 情人节来绘制更立体的玫瑰花吧

又是一年情人节&#xff0c;今年带来一款更有立体感的玫瑰&#xff1a; 曲面的函数表达式来自: http://www.bugman123.com/Math/index.html 这个网站&#xff0c;上面还有很多其他帅气的玩意。 基础绘制 xlinspace(0,1,300); thetalinspace(-2*pi,15*pi,300); [x,theta]meshg…
阅读更多...
【历史上的今天】2 月 14 日：第一台通用计算机面世；IBM 成立；Julia 公开发布

【历史上的今天】2 月 14 日：第一台通用计算机面世；IBM 成立；Julia 公开发布

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 2 月 14 日&#xff0c;在 1819 年的今天&#xff0c;打字机和第一台 QWERTY 布局键盘的发明者克里斯托弗肖尔斯&#xff08;Christopher Sholes&#xff09;出…
阅读更多...
API文档自动生成工具

API文档自动生成工具

一、参考资料 从Python源码注释&#xff0c;自动生成API文档 二、问题引入 不管是开源还是闭源&#xff0c;要让所有人都能读懂你的代码这太难了&#xff0c;所以文档是很重要的。大部分情况&#xff0c;我们不希望维护一份代码再加上一份文档&#xff0c;这样做很容易造成文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023