Style variables

CSS variables are unfamiliar territory to me. The main front-end framework supports CSS frameworks such as Sass, Less, and so on, which makes the original variables used especially little. Sass uses the variable symbol $,Less uses the variable symbol @, so what does native CSS use? You guessed right is a double in the line -, is not feeling a silk inexplicable.

The CSS profile

Cascading Style Sheets (CSS) is a Style sheet language used to describe the presentation of documents in XML branching languages such as HTML or XML. CSS describes how elements should be rendered on screen, paper, audio, and other media.

CSS development specifications

CSS is standardized across browsers by W3C specifications. The CSS is classified into the following levels: CSS1 is obsolete, CSS2.1 is recommended, and CSS3 is modular and operational.

CSS development tools

  • The W3C CSS Validation Service checks whether the CSS is valid. This is a very valuable debugging tool.
  • Firefox development tools allow you to view and edit your page’s CSS in real time through the page viewer and style editor tools.
  • Firefox’s Web Developer extension also allows you to view and edit your CSS in real time.
  • A variety of other tools.

Amazing Effect

Over the weekend, I saw a group of animations written by CSS variables. I was amazed. I checked the data in a frenzy and found myself seeing another new world of CSS. The above example uses a lot of CSS functions sin(), cos(), tan(), asin(), acos(), atan(), atan2()), their usual is rarely contact with this piece, estimated at the moment to see the article you, also don’t use too much, first use a few pictures town building.

Basic usage

// Declare the variable --main-bg-color
:root{-main-bg-color: brown; } // Use element {-- in the element tagmain-bg-color: var(--main-bg-colo);
}
Copy the code

property

The examples in this article will use property, which allows developers to explicitly define their CSS custom properties, allowing for property type checking, setting default values, and defining whether the custom property can be inherited. Some browsers are still developing this feature. So the syntax and behavior of this feature may change in future versions of the browser.

@property --property-name { syntax: '<color>'; // Use inherits: false; Initial -value: #c0ffee; }Copy the code

The sample code

1,Rubik’s Cube breathing effect(Click to see the Codeped source code)

# 3*9 layout - 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++) .tileCopy the code
$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 } }Copy the code

2,Buildings collapsed(Click to see the Codeped source code)

- 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}`)
Copy the code
$w: 1.5 em. $h: 35vmin; $t: 4s; $fn: cubic-bezier(.5, 0, .75, 0); @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} } }Copy the code

3,Double cone rotation(Click to see the Codeped source code)

- 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}`)
Copy the code
$d: 1.75 em. $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 } }Copy the code

conclusion

Due to his lack of knowledge of this comparison, put most of the source are posted, you are interested in can run online case, find some inspiration and inspiration, Css magical because the inside of the animation in the world, and their research is not so deep, but these Css animations fringes is enough to make me feel shocked, oneself also in the way of learning, Hope to be able to fight more courageous, precipitation knowledge, enrich their own.

Reference documentation

css-tricks