css變量製做心動的果凍效果（css變量）

時間 2020-05-21

標籤 css 變量製做心動果凍效果欄目 CSS 简体版

原文原文鏈接

變量的聲明

CSS自定義屬性也被稱爲CSS變量。變量就是擁有合法標識符和合法的值,能夠被使用在任意的地方。經過var()函數使用變量。 javascript

1.聲明一個局部變量：css

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

2.使用一個局部變量：html

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

3.聲明一個全局 CSS 變量：java

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

3.使用一個全局 CSS 變量：css3

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

`var()`

var() 函數還能夠使用第二個參數，表示變量的默認值。若是該變量不存在，就會使用這個默認值。瀏覽器

color: var(--color);

變量名大小寫敏感，--header-color和--Header-Color是兩個不一樣變量。dom

變量做用域

所在選擇器優先級高的變量聲明會覆蓋優先級低的。ide

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 該標記是一個帶有前導零的數字（0一、0二、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;
}

參考文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。