👴🏿 🙏🏻 🐮 通过实际示例学习CSS变量 🌱 👦 🦋

朋友们，美好的一天！

一次网上冲浪使我领会了这个精彩的代码。

它的“伟大”（即代码）是CSS中变量的实际使用，这极大地方便了样式的编写（变量的使用也导致了异常的CSS结构）。当然，这个话题非常令人印象深刻-太阳系的行星。

原始项目是用Pug和Sass编写的，但是我们将使用HTML / CSS对其进行分析。

所以走吧

一个星球（在本例中为Mercury）的布局如下（我带来了自己的轻量级版本）：

<div class="card mercury">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">mercury</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">0.034° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">1,407 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">88 days</span>
            </div>
        </div>
    </div>
</div>

我们看到以下内容：

行星包装和有关它的信息-.card
将包装器绑定到特定的行星-.mercury
行星的容器-.planet
里面是大气的容器-.atmosphere
其内部是行星的表面-.surface
行星信息容器-.info
相应行星的名称为.title
附加信息容器-.form
信息单位容器-.item
总共，我们有三个信息单元：
1. 第一个包含有关行星轴倾斜和箭头图像的信息
2. 在第二个-有关一天中时间长度的信息
3. 第三部分-大约一年中的天数

是的，我几乎忘了-字体连接在head元素中：

<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">

...和Font Awesome（对于箭头）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

所有HTML：

<div class="card mercury">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">mercury</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">0.034° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">1,407 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">88 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card venus">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">venus</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">177.3° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">5,832 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">224.7 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card earth">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">earth</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">23.26° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">23.9 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">365.2 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card mars">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">mars</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">25.2° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">24.6 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">687 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card jupiter">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">jupiter</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">3.1° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">9.9 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">4,331 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card saturn">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">saturn</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">26.7° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">10.7 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">10,747 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card uranus">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">uranus</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">97.8° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">17.2 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">30,589 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card neptune">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">neptune</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">28.3° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">16.1 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">59,800 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card pluto">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">pluto</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">122.5° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">153.3 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">90,560 days</span>
            </div>
        </div>
    </div>
</div>
<div class="card sun">
    <div class="planet">
        <div class="atmosphere">
            <div class="surface"></div>
        </div>
    </div>
    <div class="info">
        <h2 class="title">sun</h2>
        <div class="form">
            <div class="item">
                <label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">0° </span>
            </div>
            <div class="item">
                <label class="label">Day</label><span class="line"></span><span class="detail">~600 hours</span>
            </div>
            <div class="item">
                <label class="label">Year</label><span class="line"></span><span class="detail">0 days</span>
            </div>
        </div>
    </div>
</div>

让我们继续讲CSS。

以下语法用于在CSS中声明变量：

:root {
  ---: ;
}

在此处阅读有关以下内容的更多信息：root伪类。

行星的变量声明如下：

:root {
    --mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg);
    --mercury-tilt: rotate(0.034deg);
    --mercury-day: 1407.6;
    --mercury-color: #999;
}

如您所见，分别为图像，倾斜角度，一天的持续时间和行星的颜色声明了变量。

要旋转行星，请使用以下动画：

@keyframes planetRotate {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: -200% center;
    }
}

CSS中使用的变量是：

var(---);

以下是使用变量创建行星样式的方法：

.mercury .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color);
}

.mercury .surface {
    background-image: var(--mercury-image);
    transform: var(--mercury-tilt) scale(1.2);
    animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite;
}

.mercury .planet::before {
    transform: var(--mercury-tilt) scale(1.2);
    border-color: var(--mercury-color);
    color: var(--mercury-color);
}

.mercury .icon {
    transform: var(--mercury-tilt);
    color: var(--mercury-color);
}

请注意，如何使用天长（--mercure-day）变量来确定动画的持续时间（行星旋转速度）。

所有CSS：

:root {
    --mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg);
    --mercury-tilt: rotate(0.034deg);
    --mercury-day: 1407.6;
    --mercury-color: #999;
    --venus-image: url(https://thebestcode.ru/media/solarSystem/venus.jpg);
    --venus-tilt: rotate(177.3deg);
    --venus-day: 5832.5;
    --venus-color: #e8cda2;
    --earth-image: url(https://thebestcode.ru/media/solarSystem/earth.jpg);
    --earth-tilt: rotate(23.26deg);
    --earth-day: 23.9;
    --earth-color: #b3caff;
    --mars-image: url(https://thebestcode.ru/media/solarSystem/mars.jpg);
    --mars-tilt: rotate(25.2deg);
    --mars-day: 24.6;
    --mars-color: #c07158;
    --jupiter-image: url(https://thebestcode.ru/media/solarSystem/jupiter.jpg);
    --jupiter-tilt: rotate(3.1deg);
    --jupiter-day: 9.9;
    --jupiter-color: #c9b5a4;
    --saturn-image: url(https://thebestcode.ru/media/solarSystem/saturn.jpg);
    --saturn-tilt: rotate(26.7deg);
    --saturn-day: 10.7;
    --saturn-color: #f0e2c4;
    --uranus-image: url(https://thebestcode.ru/media/solarSystem/uranus.jpg);
    --uranus-tilt: rotate(97.8deg);
    --uranus-day: 17.2;
    --uranus-color: #b8d8e1;
    --neptune-image: url(https://thebestcode.ru/media/solarSystem/neptune.jpg);
    --neptune-tilt: rotate(28.3deg);
    --neptune-day: 16.1;
    --neptune-color: #5e73bb;
    --pluto-image: url(https://thebestcode.ru/media/solarSystem/pluto.jpg);
    --pluto-tilt: rotate(122.5deg);
    --pluto-day: 153.3;
    --pluto-color: #c3b6aa;
    --sun-image: url(https://thebestcode.ru/media/solarSystem/sun.jpg);
    --sun-tilt: rotate(0deg);
    --sun-day: 600;
    --sun-color: #cc9f4c;
}

@keyframes planetRotate {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: -200% center;
    }
}

body {
    background: #000;
    color: #fff;
    height: 100%;
    width: 100vw;
    margin: 10px 0 40px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 190px);
    grid-template-rows: repeat(auto-fill, 400px);
    grid-gap: 40px;
    align-items: center;
    justify-items: center;
    justify-content: center;
    overflow-x: hidden;
    font-family: "Major Mono Display";
    text-transform: lowercase;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mercury .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color);
}

.mercury .surface {
    background-image: var(--mercury-image);
    transform: var(--mercury-tilt) scale(1.2);
    animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite;
}

.mercury .planet::before {
    transform: var(--mercury-tilt) scale(1.2);
    border-color: var(--mercury-color);
    color: var(--mercury-color);
}

.mercury .icon {
    transform: var(--mercury-tilt);
    color: var(--mercury-color);
}

.venus .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--venus-color);
}

.venus .surface {
    background-image: var(--venus-image);
    transform: var(--venus-tilt) scale(1.2);
    animation: planetRotate calc(var(--venus-day)*.1s) linear infinite;
}

.venus .planet::before {
    transform: var(--venus-tilt) scale(1.2);
    border-color: var(--venus-color);
    color: var(--venus-color);
}

.venus .icon {
    transform: var(--venus-tilt);
    color: var(--venus-color);
}

.earth .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--earth-color);
}

.earth .surface {
    background-image: var(--earth-image);
    transform: var(--earth-tilt) scale(1.2);
    animation: planetRotate calc(var(--earth-day)*.1s) linear infinite;
}

.earth .planet::before {
    transform: var(--earth-tilt) scale(1.2);
    border-color: var(--earth-color);
    color: var(--earth-color);
}

.earth .icon {
    transform: var(--earth-tilt);
    color: var(--earth-color);
}

.mars .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mars-color);
}

.mars .surface {
    background-image: var(--mars-image);
    transform: var(--mars-tilt) scale(1.2);
    animation: planetRotate calc(var(--mars-day)*.1s) linear infinite;
}

.mars .planet::before {
    transform: var(--mars-tilt) scale(1.2);
    border-color: var(--mars-color);
    color: var(--mars-color);
}

.mars .icon {
    transform: var(--mars-tilt);
    color: var(--mars-color);
}

.jupiter .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--jupiter-color);
}

.jupiter .surface {
    background-image: var(--jupiter-image);
    transform: var(--jupiter-tilt) scale(1.2);
    animation: planetRotate calc(var(--jupiter-day)*.1s) linear infinite;
}

.jupiter .planet::before {
    transform: var(--jupiter-tilt) scale(1.2);
    border-color: var(--jupiter-color);
    color: var(--jupiter-color);
}

.jupiter .icon {
    transform: var(--jupiter-tilt);
    color: var(--jupiter-color);
}

.saturn .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--saturn-color);
}

.saturn .surface {
    background-image: var(--saturn-image);
    transform: var(--saturn-tilt) scale(1.2);
    animation: planetRotate calc(var(--saturn-day)*.1s) linear infinite;
}

.saturn .planet::before {
    transform: var(--saturn-tilt) scale(1.2);
    border-color: var(--saturn-color);
    color: var(--saturn-color);
}

.saturn .icon {
    transform: var(--saturn-tilt);
    color: var(--saturn-color);
}

.uranus .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--uranus-color);
}

.uranus .surface {
    background-image: var(--uranus-image);
    transform: var(--uranus-tilt) scale(1.2);
    animation: planetRotate calc(var(--uranus-day)*.1s) linear infinite;
}

.uranus .planet::before {
    transform: var(--uranus-tilt) scale(1.2);
    border-color: var(--uranus-color);
    color: var(--uranus-color);
}

.uranus .icon {
    transform: var(--uranus-tilt);
    color: var(--uranus-color);
}

.neptune .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--neptune-color);
}

.neptune .surface {
    background-image: var(--neptune-image);
    transform: var(--neptune-tilt) scale(1.2);
    animation: planetRotate calc(var(--neptune-day)*.1s) linear infinite;
}

.neptune .planet::before {
    transform: var(--neptune-tilt) scale(1.2);
    border-color: var(--neptune-color);
    color: var(--neptune-color);
}

.neptune .icon {
    transform: var(--neptune-tilt);
    color: var(--neptune-color);
}

.pluto .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--pluto-color);
}

.pluto .surface {
    background-image: var(--pluto-image);
    transform: var(--pluto-tilt) scale(1.2);
    animation: planetRotate calc(var(--pluto-day)*.1s) linear infinite;
}

.pluto .planet::before {
    transform: var(--pluto-tilt) scale(1.2);
    border-color: var(--pluto-color);
    color: var(--pluto-color);
}

.pluto .icon {
    transform: var(--pluto-tilt);
    color: var(--pluto-color);
}

.sun .atmosphere {
    box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--sun-color);
}

.sun .surface {
    background-image: var(--sun-image);
    transform: var(--sun-tilt) scale(1.2);
    animation: planetRotate calc(var(--sun-day)*.1s) linear infinite;
}

.sun .planet::before {
    transform: var(--sun-tilt) scale(1.2);
    border-color: var(--sun-color);
    color: var(--sun-color);
}

.sun .icon {
    transform: var(--sun-tilt);
    color: var(--sun-color);
}

.planet::before {
    content: '';
    position: absolute;
    height: 190px;
    z-index: -2;
    left: 50%;
    top: 0%;
    border-left: 1px dashed rgba(255, 255, 255, 0.25);
}

.atmosphere {
    height: 190px;
    width: 190px;
    position: relative;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%);
    border-radius: 100px;
    overflow: hidden;
}

.surface {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-size: cover;
}

.sun .atmosphere {
    box-shadow: 0px 0px 10px 0px var(--sun-color), 0px 0px 1000px -2px var(--sun-color);
}

.info {
    width: 100%;
}

.title {
    text-align: center;
    font-size: 28px;
}

.form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    font-size: 14px;
}

.item .icon {
    margin: 0 5px;
}

.label {
    font-size: 11px;
}

.line {
    flex: 1;
    margin: 0 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

我的版本可以在这里看到。

而这里是另一个太阳系（最好的我所看到的）。

感谢您的关注。

编码愉快！

通过实际示例学习CSS变量

More articles: