Über die Verwendung von benutzerdefinierten CSS3-Variablen in Projekten aus einer Projektrekonstruktion sprechen

Körper{
    --Farbe: rot;
}

<div Klasse="main-left-bottoms">
    <div id="Tabulatoren">
        <ul>
            <li class="on"><a name="anchor">Clubaktivitäten</a></li>
            <li>Gemeinschaftsrichtung</li>
            <li>Botschaft des Präsidenten</li>
            <li>Talentstrategie</li>
        </ul>
        <div>
            <p>Seit seiner Gründung hat der YouC Club zahlreiche Aktivitäten durchgeführt, um das außerschulische Leben der Clubmitglieder zu bereichern und das Ziel zu erreichen, Arbeit und Freizeit zu verbinden. Die Fakten haben bewiesen, dass dies tatsächlich effektiv ist. <br>
                Zum Beispiel,
            <ol>
                <li>Am Muttertag veranstalteten wir <a href="http://www.50004.com/play52/fabebbfffcfa/XMzYwMzUwNjM4MA==/">
                    Veranstaltung „Kindespflicht·Muttertag“</a> (das Laden des Videos kann etwas langsam sein) und war ein großer Erfolg;</li>
                <li>Während der Wintersonnenwende veranstalteten wir mit der Schule und den Wohnheimen eine <a href="http://sfxy.nyist.edu.cn/info/1068/3802.htm">Aktivität „Knödel zur Wintersonnenwende backen“. Alle hatten großen Spaß.</li>
                <li>In unserer Freizeit nahmen wir auch aktiv an der vom Krankenhaus organisierten Aktivität <a href="https://max.book118.com/html/2018/0513/166191393.shtm">„Besuch im Pflegeheim“ teil und hatten eine tolle Erfahrung;</li>
            </ol>
        </div>
        <div Klasse="ausblenden">
            <p>YouC Studio wurde 2009 gegründet und blickt auf eine <span id="fffffyear"></span>-jährige Geschichte zurück. <br>&nbsp;&nbsp;Nach diesen Jahren der Entwicklung hat die Community Talente in verschiedenen Bereichen hervorgebracht, darunter PHP, Java, JavaWeb,
                Big Data und so weiter. . . <font color="red">Die aktuelle Mainstream-Lernrichtung dieses Clubs ist JavaWeb, also die Back-End-Implementierung, die eher auf die Website-Entwicklung ausgerichtet ist. </font> <br>&nbsp;&nbsp;Die Community rundet die Entwicklung eines Projektes häufig durch entsprechende Austauschaktivitäten ab.
                Um ihr Wissen zu erweitern, nehmen die Mitglieder gelegentlich an Wettbewerben teil und erzielen dabei gute Ergebnisse. <br><br>
                <font color="#ff7f50">Für spezifische persönliche Pläne scannen Sie bitte den QR-Code auf der rechten Seite, um Senioren zu fragen! </font></p>
        </div>
        <Skript>
            document.getElementById('fffffyear').innerHTML = (new Date().getFullYear() - 2009) + '';
        </Skript>
        <div Klasse="ausblenden">
            <br><br>
            <p>Auch wenn ständig Leute hinzukommen und gehen, ist YouC immer noch da und wartet auf Sie, und ich bin fest davon überzeugt, dass die Zukunft von YouC noch besser sein wird! </p> <p>——Wunsch des Präsidenten</p>
        </div>
        <div Klasse="ausblenden">
            <br>
            <p>Machen Sie mit, machen Sie mit bei YouC. Hier können Sie ein wunderbares Wissenserlebnis haben. Senioren mit großer Vorstellungskraft werden Sie dazu anleiten, Wissen zu erforschen, Fähigkeiten zu erlernen, praktische Projekte durchzuführen und sich auf Vorstellungsgespräche vorzubereiten. </font><br>
                Hier können Sie ein Glück finden, das Ihre Vorstellungskraft übersteigt! ! ! </p>
        </div>
    </div>
</div>

.main-left-bottoms{Breite: 100%;Mindesthöhe: 280px;Top-Rand: 10px;}
.main-left-bottoms h1{Farbe: orangerot;Schriftart: kursiv;}
.main-left-bottoms #tabs{width: 99%;padding:5px;min-height: 280px;}
.main-left-bottoms #tabs ul{list-style:none;display:block;min-height:30px;line-height:30px;border-bottom:2px rot durchgezogen;}
.main-left-bottoms #tabs ul li{cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0 3px;border:2px groove orangered;border-bottom:none;display:inline-block;width:65px;text-align:center;font-weight: bold;color: black;padding: 0 10px;}
.main-left-bottoms #tabs ul li.on{border-bottom:2px solid skyblue;}
.main-left-bottoms #tabs div{min-height: 199px;line-height:25px;border-top:none;padding:0.3125em;overflow:hidden;}
#tabs div p{Schriftgröße: 0,838rem;}
#tabs div ol li{font-size: 0.875rem;margin-top: 5px;}
#tabs div ol li a{Farbe: Hellkoralle;Textdekoration: keine;}
#tabs div ol li a:hover{color: orange;}
.main-left-bottoms .hide{display:none;}

<div Klasse="Tab-Navigationsleiste">
    <Navigation>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">Titel{{i + 1}}</a>
    </nav>
    <div>
        <ul ref="tabs" :style="`--tab-count: ${list.length}`">
            <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">Ich bin der Inhalt {{i + 1}}</li>
        </ul>
    </div>
</div>

.tab-navbar {
    Anzeige: Flex;
    Überlauf: versteckt;
    Rahmenradius: 10px;
    Breite: 300px;
    Höhe: 200px;
    Navigation {
        Anzeige: Flex;
        Höhe: 40px;
        Hintergrundfarbe: #f0f0f0;
        Zeilenhöhe: 40px;
        Textausrichtung: zentriert;
        A {
            biegen: 1;
            Cursor: Zeiger;
            Übergang: alle 300ms;
            &.aktiv {
                Hintergrundfarbe: #3c9;
                Farbe: #fff;
            }
        }
    }
    div {
        biegen: 1;
        ul {
            --tab-index: 0;
            --tab-width: berechnet (var (--tab-count) * 100 %);
            --tab-move: berechnen(var(--tab-index) / var(--tab-count) * -100%);
            Anzeige: Flex;
            Flex-Wrap: Nowrap;
            Breite: var(--tab-width);
            Höhe: 100%;
            transformieren: übersetzen3d(var(--tab-move), 0, 0);
            Übergang: alle 300ms;
        }
        li {
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
            biegen: 1;
            Hintergrundfarbe: var(--bg-color);
            Schriftstärke: fett;
            Schriftgröße: 20px;
            Farbe: #fff;
        }
    }
}

Standard exportieren {
    Daten() {
        zurückkehren {
            Index: 0,
            Liste: ["#09f", "#f90", "#66f", "#f66"]
        };
    },
    Methoden: {
        auswählen(i) {
            dies.index = i;
            dies.$refs.tabs.style.setProperty("--tab-index", i);
        }
    }
};

<ul Klasse="Streifen wird geladen">
	<li style="--line-index: 0"></li>
	<li style="--line-index: 1"></li>
	<li style="--line-index: 2"></li>
	<li style="--line-index: 3"></li>
	<li style="--line-index: 4"></li>
	<li style="--line-index: 5"></li>
</ul>

.strip-laden {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Breite: 200px;
    Höhe: 200px;
    li {
        --Zeit: berechnet (var (--line-index) * 200 ms);
        Rahmenradius: 3px;
        Breite: 6px;
        Höhe: 30px;
        Hintergrundfarbe: #f66;
        Animation: Takt 1,5 s, Ein- und Ausschwingen, var(--time) unendlich;
        & + li {
            Rand links: 5px;
        }
    }
}
@keyframes schlagen {
    0%,
    100 % {
        transformieren: scaleY(1);
    }
    50 % {
        transformieren: scaleY(.5);
    }
}

<button Klasse="track-btn">
	<span>Junger Mann, klick mich an und ich werde dir Kraft geben</span>
</button>

.track-btn {
	Rand: 0;
	Polsterung: 0;
	/*Benutzerdefinierter Rahmen*/
	Rand: 0;
	/*Beseitigt den standardmäßigen blauen Rahmeneffekt beim Klicken*/
	Gliederung: keine;
	-webkit-auftritt: keines;
	Überlauf: versteckt;
	Position: relativ;
	Rahmenradius: 25px;
	Höhe: 49,9px;
	Hintergrundfarbe: #66f;
	Cursor: Zeiger;
	Zeilenhöhe: 50px;
	Textausrichtung: zentriert;
	Schriftstärke: fett;
	Schriftgröße: 18px;
	Farbe: #fff;
	Polsterung: 0 20px;
	Spanne {
		Position: relativ;
		Zeigerereignisse: keine;
	}
	&::vor {
		--Größe: 0;
		Position: absolut;
		links: var(--x);
		oben: var(--y);
		Breite: var(--size);
		Höhe: var(--size);
		Hintergrundbild: radialer Farbverlauf (Kreis, der der nächsten Seite zugewandt ist, Nr. 09f, transparent);
		Inhalt: "";
		transformieren: übersetzen3d(-50 %, -50 %, 0);
		Übergang: Breite 200 ms mühelos, Höhe 200 ms mühelos;
	}
	&:hover::vor {
		--Größe: 200px;
	}
}

const btn = document.getElementsByClassName("track-btn")[0];

btn.addEventListener("Mausbewegung", e => {
	btn.style.setProperty("--x", `${e.offsetX}px`);
	btn.style.setProperty("--y", `${e.offsetY}px`);
});

//Referenzieren/ändern Sie den CSS3-Variablenwert im Stil document.documentElement.style.setProperty("name", value)

#eckig {
	--eckig: "";
}
#angular:geprüft {
	 --angular: "eckig";
}

:Wurzel { 
	--Größe: 1,5em; 
} 
@media (Mindestbreite: 30em) { 
	:Wurzel { 
		--Größe: 2em; 
	} 
} 
.Container {
	Rand: 0 automatisch; 
	maximale Breite: 60em; 
	Schriftgröße: var(--size); 
}