Css变量的巧思妙用

最新推荐文章于 2023-07-27 19:44:48 发布

Code1921

最新推荐文章于 2023-07-27 19:44:48 发布

阅读量288

点赞数

文章标签： css html html5 javascript vscode

本文链接：https://blog.csdn.net/weixin_47544592/article/details/120524344

版权

样式变量

css 变量对我来说是个陌生的领域。主要是前端框架支持Sass，Less等css框架，使得其原有的变量就用的特别少。 Sass里面用的是变量符号$,Less中用的变量符号是@,原生css里面用的是什么呢？你猜对了是双中划线--，是不是有感觉一丝丝的莫名。

css的简介

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

css的发展规范

CSS 是由W3C 规范实现跨浏览器的标准化。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3模块化和操作化。

CSS 开发工具

W3C CSS Validation Service（万维网联盟 CSS 验证服务）用以检查 CSS 是否有效。这是非常有价值的调试工具。
Firefox 开发工具允许通过页面查看器和样式编辑器工具查看和实时编辑页面的CSS。
Firefox 的 Web Developer 扩展，也允许实时查看和编辑网站的 CSS。
各种各样的其他工具。

惊艳的效果

周末看了一组css变量写的动画，被惊艳到了，内心一阵狂热就查看了一下资料，发现自己看到另一个崭新的css新世界。上面的示例用了很多css函数sin(), cos(), tan(), asin(), acos(), atan(), atan2())，自己在平时是很少接触这一块的，估计此刻再看文章的你，也没用太多吧，先用几张图镇镇楼。

基本用法

// 声明变量--main-bg-color
:root {
  --main-bg-color: brown;
}
// 在元素标签中使用
element {
  --main-bg-color: var(--main-bg-colo);
}

property

文中示例将会用到 property， property 它允许开发者显式地定义他们的css自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承,此功能某些浏览器尚在开发中，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

@property --property-name {
  syntax: '<color>'; //必填
  inherits: false;//必填
  initial-value: #c0ffee;
}

示例代码

1，魔方呼吸效果（点击可查看Codeped源代码）

# 3*9布局
- let p = 3, n = 9;
- let m = n*n;

style
	- for(let i = 0; i < n; i++)
		| .tile:nth-child(#{n}n + #{i + 1}) { --x: #{i} }
		| .tile:nth-child(n + #{n*i + 1}) { --y: #{i} }
.cube(style=`--n: ${n}`)
	- for(let i = 0; i < p; i++)
		.face(style=i < p - 1 ? `--f: ${i}` : null)
			- for(let j = 0; j < m; j++)
				.tile

$l: 2em;
$sf: .2;
$s0: 0 0 5px 2px currentcolor;
$s1: 0 0 1px 1px rgba(#fff, .5);
$t: 2s;

@property --ty {
	syntax: '<length-percentage>';
	initial-value: 0%;
	inherits: false
}

@property --ay {
	syntax: '<angle>';
	initial-value: -45deg;
	inherits: false
}

@property --q {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false
}

body, div { display: grid }

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: #262626
}

div { transform-style: preserve-3d }

.cube {
	place-self: center;
	transform: 
		translatey(var(--ty, 0))
		rotatex(-35deg) 
		rotatey(calc(var(--ay, -45deg) - var(--q, 0)*90deg));
	animation: 
		ty $t ease-in-out infinite alternate, 
		ay 2*$t ease-in-out infinite, 
		q 2*$t steps(1) infinite
}

@keyframes ty { to { --ty: 12.5% } }
@keyframes ay { to { --ay: 45deg } }
@keyframes q { 50% { --q: 1 } }

.face {
	--i: 0;
	--j: calc(1 - var(--i));
	grid-area: 1/ 1;
	grid-template: 
		repeat(var(--n), $l)/ repeat(var(--n), $l);
	transform: 
		rotate3d(var(--i), var(--j), 0, calc(var(--f, 1)*90deg)) 
		translatez(calc(.5*var(--n)*#{$l}));
	
	&:last-child { --i: 1 }
}

.tile {
	--m: calc(.5*(var(--n) - 1));
	--dx: max(var(--m) - var(--x), var(--x) - var(--m));
	--dy: max(var(--m) - var(--y), var(--y) - var(--m));
	--dt: calc((
		var(--j)*(.5*(var(--dx) + var(--y) + var(--m))/var(--m) - 2) + 
		var(--i)*(.5*(var(--dx) + var(--dy))/var(--m) - 2))*#{$t});
	backface-visibility: hidden;
	border-radius: 5px;
	box-shadow: $s1, inset $s1,  $s0, inset $s0;
	background: #141414;
	color: fuchsia;
	animation: a 0s var(--dt) infinite alternate;
	animation-name: m, c;
	animation-duration: .5*$t, $t;
	animation-timing-function: ease-in-out, linear
}

@keyframes m {
	to { transform: translatez(.5*($sf - 1)*$l) scale($sf) }
}

@keyframes c { to { color: aqua } }

2，高楼坍塌(点击可查看Codeped源代码)

- let n = 100;
section.plane
  while n--
    - let hv = Math.round(10*Math.random());
    - let rand = Math.random();
    - let sf = +(1 - .5*(1 - rand)).toFixed(3);
    - let lf = +(1 - .5*rand).toFixed(3);
    .col(style=`--hv: ${hv}; --sf: ${sf}; --lf: ${lf}`)

$w: 1.5em;
$h: 35vmin;
$t: 4s;
$fn: cubic-bezier(.5, 0, .75, 0);

![tower.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b5525d0f89f419e8c039d17e003ed6a~tplv-k3u1fbpfcp-watermark.image?)
![tower.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/023822f274e844a3ab34453368d73381~tplv-k3u1fbpfcp-watermark.image?)
@property --hue {
  syntax: '<number>';
  initial-value: 0;
  inherits: false
}

@property --y0 {
  syntax: '<length>';
  initial-value: 0vmin;
  inherits: false
}

@property --y1 {
  syntax: '<length>';
  initial-value: 0vmin;
  inherits: false
}

body {
  display: grid;
  place-content: center;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 90vmin;
  background: #000;
}

.plane {
  display: grid;
  grid-template: repeat(10, $w)/ repeat(10, $w);
  transform-style: preserve-3d;
  transform: rotatex(55deg) rotate(45deg);
}

.col {
  --m: 4.5;
  --abs-i: max(calc(var(--m) - var(--i)), calc(var(--i) - var(--m)));
  --abs-j: max(calc(var(--m) - var(--j)), calc(var(--j) - var(--m)));
  position: relative;
  transform-style: preserve-3d;
  transform:
    translatez(calc(var(--y0) + var(--y1)));
  box-shadow: 0 0 1px currentcolor;
  background: currentcolor;
  color: 
    hsl(calc(var(--hue, 0) + var(--hv)), 
        calc(var(--sf)*90%), 
        calc(var(--lf)*80%));
  --dt: calc((var(--abs-i) + var(--abs-j))/10*#{-$t});
  animation: 
    hue 20s linear infinite,  
    y0 $t $fn var(--dt) infinite, 
    y1 $t linear var(--dt) infinite;
  
  @for $i from 0 to 10 {
    &:nth-child(10n + #{$i + 1}) { --i: #{$i} }
    
    &:nth-child(n + #{$i*10 + 1}) { --j: #{$i} }
  }
  
  &::before, &::after {
    --k: 0;
    position: absolute;
    left: 50%;
    width: $h; height: 100%;
    transform-origin: 0 50%;
    transform: 
      rotate(calc(var(--k)*90deg)) 
      translate(.5*$w) 
      rotatey(90deg);
    box-shadow: -1px 0 1px currentcolor;
    background: inherit;
    filter: brightness(calc(1 - .1*(1 + var(--k))));
    content: ''
  }
  
  &::after { --k: 1 }
}

@keyframes hue { to { --hue: 360 } }
@keyframes y0 { 50%, 100% { --y0: #{-$h} } }

@keyframes y1 { to { --y1: #{$h} } }

3，双圆锥转动(点击可查看Codeped源代码)

- let n_rot = 5, n_dot = 24;
- let p = 2*n_rot*n_dot + 1;

style .a3d { --n-dot: #{n_dot}; --p: #{p} }
	- for(let k = 0; k < n_dot; k++)
		| .dot:nth-child(#{n_dot}n + #{k + 1}) { --k: #{k} }
.a3d
	while p--
		.dot(style=`--i: ${p}`)

$d: 1.75em;
$t: 8s;

@function int-c($c0, $c1, $f) {
	$h0: round(hue($c0)/1deg);
	$s0: round(saturation($c0));
	$l0: round(lightness($c0));

	$h1: round(hue($c1)/1deg);
	$s1: round(saturation($c1));
	$l1: round(lightness($c1));
	
	@return hsl(calc((1 - #{$f})*#{$h0} + #{$f}*#{$h1}), 
							calc((1 - #{$f})*#{$s0} + #{$f}*#{$s1}), 
							calc((1 - #{$f})*#{$l0} + #{$f}*#{$l1}))
}

@property --ay {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: true
}

@property --az {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: true
}

body, div { display: grid }

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: #5c5757
}

.a3d {
	--ay: 0deg;
	--az: 0deg;
	transform-style: preserve-3d;
	transform: rotatey(var(--ay)) rotate(var(--az));
	animation: az $t linear infinite, 
		ay $t cubic-bezier(.68, -.6, .32, 1.6) infinite
}

.dot {
	--m: calc(.5*(var(--p) - 1));
	--abs: max(calc(var(--m) - var(--i)), calc(var(--i) - var(--m)));
	--sgn: clamp(-1, var(--i) - var(--m), 1);
	--d: calc(3px + var(--abs)/var(--p)*#{$d});
	--a: calc(var(--k)*1turn/var(--n-dot));
	--x: calc(var(--abs)*2*#{$d}/var(--n-dot));
	--z: calc((var(--i) - var(--m))*2*#{$d}/var(--n-dot));
	grid-area: 1/ 1;
	place-self: center;
	width: var(--d); height: var(--d);
	border-radius: 50%;
	transform: 
		scalex(var(--sgn))
		rotate(var(--a)) 
		translate3d(var(--x), 0, var(--z)) 
		rotate(calc(-1*var(--a))) 
		scalex(var(--sgn))
		rotate(calc(-1*var(--az)))
		rotatey(calc(-1*var(--ay)));
	background: 
		radial-gradient(circle at 35% 35%, 
			#fff, int-c(#d68400, #5786eb, calc(var(--i)/var(--p))) 65%);
}

@keyframes ay {
	0%, 15% { --ay: 1turn }
	50%, 65% { --ay: .5turn }
}

@keyframes az { to { --az: 1turn } }

总结

由于自己对这一块的知识比较缺乏，就把大部分的源码都贴出来了，大家有兴趣的可以运行在线的案列，找一些灵感和启发，Css世界里面的动画奇幻无穷，自己的研究的没有那么深，但是这些Css动画的边边角角就足以让我感到震撼，自己还在学习的路上，希望能够越战越勇，沉淀知识，丰富自己。

参考文档

css-tricks

Code1921

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Css变量的巧思妙用

样式变量css变量对我来说是个陌生的领域。主要是前端框架支持Sass，Less等css框架，使得其原有的变量就用的特别少。Sass里面用的是变量符号$,Less中用的变量符号是@,原生css里面用的是什么呢？你猜对了是双中划线--，是不是有感觉一丝丝的莫名。css的简介层叠样式表(Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述HTML或XML之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如...
复制链接

扫一扫