CSS 變數運用
CSS 變數 ，是CSS一個很大的轉類點，讓我們可以用HTML自訂變數，也可以透過簡單的JS來改變。
CSS
:root {
--main-bg-color: brown;
}
.square {
--main-bg-color: brown;
width: var(--size, 10px);
height: var(--size, 10px);
}
.three {
/* pink if --my-var and --my-background are not defined */
background-color: var(--my-var, var(--my-background, pink));
}
:root
自訂全域變數
變數預設值
var(XXX ,預設值)
HTML
<div class="elem" style="--background: red;"></div>Values in JavaScript
// get variable from inline style
element.style.getPropertyValue("--my-var");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");
// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);運用
DOME : DUNLOP 登祿普…
<div id="loading" style="display: none;">
<div class="container">
<div class="cloud">
<h1 class="loading">LOADING... </h1>
<img src="https://www.dunlop-kc.com.tw/ridea/images/frontend/pc/tw/loading_car.png" alt="car">
<div style="--i:1;" > </div>
<div style="--i:2;" > </div>
<div style="--i:3;" > </div>
<div style="--i:4;" > </div>
<div style="--i:5;" > </div>
<div style="--i:6;" > </div>
<div style="--i:7;" > </div>
<div style="--i:8;" > </div>
<div style="--i:9;" > </div>
<div style="--i:10;" ></div>
<div style="--i:11;" ></div>
<div style="--i:12;" ></div>
<div style="--i:13;" ></div>
<div style="--i:14;" ></div>
<div style="--i:15;" ></div>
<div style="--i:16;" ></div>
<div style="--i:17;" ></div>
<div style="--i:18;" ></div>
<div style="--i:19;" ></div>
<div style="--i:20;" ></div>
<div style="--i:21;" > </div>
<div style="--i:22;" > </div>
<div style="--i:23;" > </div>
<div style="--i:24;" > </div>
<div style="--i:25;" > </div>
<div style="--i:26;" > </div>
<div style="--i:27;" > </div>
<div style="--i:28;" > </div>
<div style="--i:29;" > </div>
<div style="--i:90;" ></div>
<div style="--i:31;" ></div>
<div style="--i:32;" ></div>
<div style="--i:33;" ></div>
<div style="--i:34;" ></div>
<div style="--i:35;" ></div>
<div style="--i:36;" ></div>
<div style="--i:37;" ></div>
<div style="--i:38;" ></div>
<div style="--i:39;" ></div>
<div style="--i:40;" ></div>
<div style="--i:41;" > </div>
<div style="--i:42;" > </div>
<div style="--i:43;" > </div>
<div style="--i:44;" > </div>
<div style="--i:45;" > </div>
</div>
</div>
</div>
<style>
#loading{
position: fixed;
z-index: 1000;
width: 100%;
top:0;
}
.container{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color:#b2b2b2;
}
.container img{
width: 45%;
padding-bottom: 5.2rem;
transform-origin: bottom right;
animation: caranim 2s linear infinite;
}
.container h1 {
font-size: 28px;
font-style: italic;
letter-spacing: 2px;
font-family:'Exo 2', sans-serif;
position: absolute;
top: 46%;
left: 14%;
color: #ffffff;
text-shadow:2px 2px 3px #666666;
}
.container h1::last-letter(n) {
color:#fff;
}
.container .cloud{
position: relative;
width: 200px;
height: 200px;
}
.container .cloud div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(8deg * var(--i)));
}
.container .cloud div::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 42.5px;
height: 35px;
background: url(https://1.bp.blogspot.com/-WIZc1SBiTSI/X7p-batMLII/AAAAAAAAC10/Sq91B8w6I2Qymae4oLQrOAMVYGI-sx1AgCPcBGAYYCw/s123/cloud.png);
background-size: 42.5px;
opacity: 0;
animation: anim 2s linear infinite;
animation-delay: calc(0.05s * var(--i));
}
@keyframes anim {
0%{
transform: scale(0);
opacity: 1;
}
29%{
opacity: 0;
transform: scale(1);
}
100%{
transform: scale(1);
opacity: 0;
}
}
@keyframes caranim{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.grecaptcha-badge { visibility: hidden; }
</style>
