AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css变量制作心动的果冻效果（css变量）

2022-04-27 256
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： **CSS自定义属性也被称为CSS变量。变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。**

变量的声明

CSS自定义属性也被称为CSS变量。变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使用变量。

1.声明一个局部变量：

.jelly {
  --main-bg-color: #e91e63;
}

2.使用一个局部变量：

.jelly {
  background-color: var(--main-bg-color);
}

3.声明一个 全局 CSS 变量：

:root {
  --global-color: #666;
}

3.使用一个 全局 CSS 变量：

.jelly{
   color: var(--global-color);
}

var()

var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

color: var(--color);

变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

变量作用域

所在选择器优先级高的变量声明会覆盖优先级低的。

body {
    --color: red;
}

p {
    --color: black;
}

与 calc 结合使用

height: calc(100vh - var(--header-height));

第二个参数不处理内部的逗号或空格，都视作参数的一部分。

js操作css变量

读取变量的值：

const dom = document.querySelector('selector');
dom.style.getPropertyValue('--color');

修改css变量的值：

const dom = document.querySelector('selector');
dom.style.setProperty('--color', 'white');

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。

element.style.getPropertyValue("--my-var");

getComputedStyle(element).getPropertyValue("--my-var");

element.style.setProperty("--my-var", jsVar + 4);

javascript 检测浏览器支持

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

超可爱的果冻效果：

    <div class="jelly-box">
        <div class="jelly jelly1"></div>
        <div class="jelly jelly2"></div>
        <div class="jelly jelly3"></div>
        <div class="jelly jelly4"></div>
        <div class="jelly jelly5"></div>
        <div class="jelly jelly6"></div>
    </div>
.jelly {
    --x: 84;
    --y: 75;
    --size: 128;
    width: 10rem;
    height: 10rem;
    min-width: 6em;
    min-height: 6em;
    background: var(--color, #aaa);
    border: 0 solid transparent;
    box-sizing: border-box;
    margin: .5em;
    opacity: .7;
    --dx: calc(var(--size) - var(--x));
    --dy: calc(var(--size) - var(--y));
    opacity: 1;
    cursor: pointer;
    border: calc(2px + .65vw) solid rgba(255, 255, 255, .5);
    border-radius: calc(var(--x) / var(--size) * 100%) calc(var(--dx) / var(--size) * 100%) calc(var(--dx) / var(--size) * 100%) calc(var(--x) / var(--size) * 100%) / calc(var(--y) / var(--size) * 100%) calc(var(--y) / var(--size) * 100%) calc(var(--dy) / var(--size) * 100%) calc(var(--dy) / var(--size) * 100%);
}

第一个果冻（设置css变量值，覆盖掉默认值）

.jelly1 {
    --color: #f44336;
    --x: 160.71999999999997;
    --y: 90.72;
    --size: 192;
}

其他果冻

/* 第2个果冻 */
.jelly2 {
    --color: #e91e63;
    --x: 155.82;
    --y: 97.01999999999998;
    --size: 192;
}
/* 第3个果冻 */
.jelly3 {
    --color: #9c27b0;
    --x: 160.71999999999997;
    --y: 101.22;
    --size: 192;
}
/* 第4个果冻 */
.jelly4 {
    --color: #2196f3;
    --x: 78.11999999999999;
    --y: 107.51999999999998;
    --size: 192;
}
/* 第4个果冻*/
.jelly5 {
    --color: #4caf50;
    --x: 55.71999999999999;
    --y: 100.51999999999998;
    --size: 192;
}
/* 第5个果冻 */
.jelly6 {
    --color: #ff9800;
    --x: 130.62;
    --y: 88.61999999999999;
    --size: 192;
}

counter-increment 添加元素编号

所有主流浏览器都支持counter-increment属性。

使用方式：

.jelly-box .jelly {
    counter-increment: number;/* 给每个元素编号 */
    counter-reset: number;/* 重置元素编号，即重复一个编号 */
}

.jelly:after {
    content: counter(number); /*在content里面放置编号*/
    /* 其他属性省略 */
}

制作精致的卡片效果

html

<!-- Grid+css变量 -->
<div class="variables-wrraper">
    <div class="variables-box variables-box1">
        <div class="variables"></div>
    </div>
    <div class="variables-box variables-box2">
        <div class="variables"></div>
    </div>
    <div class="variables-box variables-box4">
        <div class="variables"></div>
    </div>
    <div class="variables-box variables-box5">
        <div class="variables"></div>
    </div>
</div>

Grid+css变量：

.variables-wrraper {
    --i: var(--wide, 1); /* 由于wide未定义,所以会取第二个值 */
    --j: calc(1 - var(--i)); /* 由于wide未定义,i为1,由此j取值为0 */
}

解释：

由于wide未定义,i第二个值,而j依赖于i，所以j为0；而一旦wide定义了变量，i,j随着改变；

.variables-box {
    --p: var(--parity, 1);
    --q: calc(1 - var(--p));
    --s: calc(1 - 2*var(--p));
    display: grid;
    grid-template: calc(var(--j)*2.5em) 5em 1fr/calc(var(--i)*(var(--q)*13.5em + var(--p)*5em) + var(--j)*3.5em) 1fr calc(var(--i)*(var(--p)*13.5em + var(--q)*5em) + var(--j)*3.5em);
    overflow: hidden;
    margin: 1em auto;
    max-width: 39em;
    min-height: 10em;
    border-radius: calc(var(--i)*10em);
    box-shadow: 15px 15px 17px rgba(0, 0, 0, 0.25);
    background: linear-gradient(#f0f0f0, #fafafa 5em, #eaeaea 0, #dadada) 0 100%/100% calc(100% - var(--j)*2.5em);
    counter-increment: idx;
}

解释：

display: grid指定一个容器采用网格布局。

grid-template，CSS属性简写，用以定义网格中行、列与分区。

counter-increment 添加元素编号 ，见第一个实例。

.variables-box:before,
.variables-box :after {
    --m: 0;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.65);
    transform-origin: calc(var(--p)*100%) calc((1 - var(--m))*100%);
    transform: skewx(calc(var(--i)*var(--s)*(1 - 2*var(--m))*27deg));
    background: linear-gradient(calc(var(--s)*(1 - 2*var(--m))*90deg), HSL(var(--hsl0)), HSL(var(--hsl1)));
    content: "";
}

解释:

transform-origin 设置旋转元素的基点位置 ( 默认值 : 50% 50% 0 )

语法:transform-origin: x-axis y-axis z-axis;

x-axis ( 定义视图被置于 X 轴的何处): left,center,right,length,%

y-axis ( 定义视图被置于 Y 轴的何处):top,center,bottom,length,%

z-axis ( 定义视图被置于 Z 轴的何处):length 

.variables-box:before,
.variables-box .variables {
    grid-row: 1/calc(2 + 2*var(--i));
    grid-column: calc(1 + 2*var(--i)*var(--p))/span calc(1 + 2*var(--j));
}

解释：

grid-rows grid-rows属性指定在网格中的每一行的高度。

如： 定义为100像素的标题行，必要的并添加许多附加的30和60像素的高度：

 div{
         grid-rows:100px (30px 60px);
 }

解释：grid-columns grid-columns 属性网格中每列的宽度。

如： 在 div 元素中部添加一个网格行，距右侧 200 像素处添加另一个，在余下空间的中间再添加一个：

div{
    grid-columns:50% * * 200px;
}

.variables-box:after {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--i)*1.5625em + var(--j)*1.75em);
    content: attr(data-icon);
}

.variables-box:nth-of-type(odd) {
    --parity: 0;
}

解释：

:nth-child(even) 选中偶数位置的子元素

:nth-child(odd) 选中奇数位置的子元素

.variables {
    display: grid;
    grid-template: repeat(calc(var(--i) + 1), 2em)/repeat(calc(var(--j) + 1), 3.5em);
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: calc(var(--i)*1.75em) calc(var(--i)*var(--q)*2.05em) 0 calc(var(--i)*var(--p)*2.05em);
    color: #fff;
    font-size: 1.25em;
    font-weight: 400;
    text-transform: uppercase;
}

.variables:before {
    font-size: calc(var(--i)*2em + 1em);
    font-weight: 500;
    content: counter(idx, decimal-leading-zero);
}

解释：

decimal-leading-zero 该标记是一个带有前导零的数字（01、02、03 等）

listStyleType属性： listStyleType 属性设置或返回列表项标记的类型。

设置 listStyleType 属性：Object.style.listStyleType="*value*"

返回 listStyleType 属性：Object.style.listStyleType 

.variables:after {
    --m: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

第一个展示标签

.variables-box1 {
    --hsl0: 49, 100%, 54%;
    --hsl1: 33, 96%, 50%;
    --idx: 0;
}

第二个展示标签

.variables-box2 {
    --hsl0: 82, 81%, 52%;
    --hsl1: 104, 56%, 51%;
    --idx: 1;
}

第三个展示标签

.variables-box3 {
    --hsl0: 169, 50%, 44%;
    --hsl1: 191, 99%, 27%;
    --idx: 2;
}

第四个展示标签

.variables-box4 {
    --hsl0: 332, 94%, 67%;
    --hsl1: 338, 101%, 59%;
    --idx: 3;
}

参考文档

1.CSS Grid 网格布局教程

2.CSS 变量技术

3.CSS变量是什么？

4.CSS 变量教程

5.MND

强烈推荐

如果这篇文章帮助到了你，欢迎点赞和关注，搜索《叫我詹躲躲》加入我们的技术群一起学习讨论，共同探索前端的边界。

image

文章标签：
JavaScript
前端开发
容器
关键词：
CSS变量
CSS心动
CSS制作
微芒不朽
目录
相关文章
sunrr
|
7月前
|
前端开发 开发者
CSS变量，也被称为CSS自定义属性或级联变量
【4月更文挑战第7天】CSS变量，也被称为CSS自定义属性或级联变量
sunrr
56 3
龙大吉
|
22天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
35 5
大树营养快线
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
71 15
大树营养快线
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同？
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念，但由于它们所属的语言和应用场景不同，其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
大树营养快线
59 14
大树营养快线
|
1月前
|
前端开发 JavaScript
如何在 CSS 变量中使用函数？
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理，但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合，可以在很大程度上实现类似函数的功能，提高CSS样式的灵活性和可维护性，满足各种不同的页面设计和交互需求。
大树营养快线
53 12
大树营养快线
|
1月前
|
前端开发 开发者 容器
CSS 变量的作用域是什么？
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域，以及掌握变量的覆盖和继承规则，可以创建更具可维护性、灵活性和可扩展性的CSS样式表，实现各种复杂的页面设计和样式需求。
大树营养快线
48 7
大树营养快线
|
1月前
|
前端开发 JavaScript UED
如何在内联样式中设置 CSS 变量？
【10月更文挑战第28天】
大树营养快线
31 6
大树营养快线
|
1月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值？
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化，根据不同的应用场景和需求，可以选择合适的方法来实现CSS变量的动态修改，从而提高页面的灵活性和用户体验。
大树营养快线
89 5
六卿
|
3月前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量，来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
六卿
72 0
夏天49597
|
6月前
|
前端开发 JavaScript 开发者
CSS进阶-CSS变量
【6月更文挑战第13天】本文介绍了CSS变量（Custom Properties）的基本概念、应用场景和常见问题。通过声明与使用示例，展示了如何定义和引用变量。文章讨论了兼容性、作用域、错误引用及JavaScript交互等易错点，并提供了相应的解决方案。此外，还分享了实践技巧，如模块化色彩系统、响应式设计和动画制作。通过学习，开发者能更好地利用CSS变量提高样式灵活性和维护性。
夏天49597
81 3