プロジェクトの再構築からプロジェクトにおける CSS3 カスタム変数の使用について話す

体{
    --色:赤;
}

<div class="main-left-bottoms">
    <div id="タブ">
        <ul>
            <li class="on"><a name="anchor">クラブ活動</a></li>
            <li>コミュニティの方向性</li>
            <li>社長メッセージ</li>
            <li>人材戦略</li>
        </ul>
        <div>
            <p>YouCクラブは設立以来、クラブメンバーの課外活動を充実させ、仕事と休息を組み合わせるという目標を達成するために、数多くの活動を行ってきました。これは確かに効果的であることが事実によって証明されています。 <br>
                例えば、
            <オル>
                <li>母の日に、私たちは<a href="http://www.50004.com/play52/fabebbfffcfa/XMzYwMzUwNjM4MA==/">を開催しました。
                    「親孝行・母の日」イベント</a>（動画の読み込みが少し遅い場合があります）を開催し、大盛況でした。</li>
                <li>冬至の時期に、学校と寮の合同で<a href="http://sfxy.nyist.edu.cn/info/1068/3802.htm">「冬至団子作り」というイベントを開催しました。みんなとても楽しんでいました。</li>
                <li>また、余暇には、病院主催の「老人ホーム訪問」活動にも積極的に参加し、素晴らしい経験をしました。</li>
            </ol>
        </div>
        <div class="hide">
            <p>&nbsp;&nbsp;YouC Studio は 2009 年に設立され、<span id="fffffyear"></span> 年の歴史を誇ります。 <br>&nbsp;&nbsp;この数年間の開発を経て、コミュニティはPHP、Java、JavaWebなど、さまざまな分野で才能を輩出してきました。
                ビッグデータなど。 。 。 <font color="red">このクラブの現在の主流の学習方向は、JavaWeb、つまりバックエンドの実装であり、Webサイト開発に重点を置いています。 </font> <br>&nbsp;&nbsp;コミュニティは、対応する交換活動を通じてプロジェクトの開発を完了することがよくあります。
                メンバーは知識を高めるために、時々競技会に参加し、良い成績を収めています。 <br><br>
                <font color="#ff7f50"> 具体的な個人プランについては、右のQRコードをスキャンして先輩に聞いてください！ </font></p>
        </div>
        <スクリプト>
            document.getElementById('fffffyear').innerHTML = (new Date().getFullYear() - 2009) + '';
        </スクリプト>
        <div class="hide">
            <br><br>
            <p>人々は絶えず参加したり去ったりしていますが、YouC は今もここにいて、皆さんを待っています。そして、YouC の未来はさらに明るいものになると私は固く信じています。 </p> <p>——社長の願い</p>
        </div>
        <div class="hide">
            <br>
            <p>ぜひ、YouC に参加してください。ここでは、素晴らしい知識体験ができます。想像力豊かな先輩たちが、知識の探求、スキルの習得、実践的なプロジェクトの実行、面接の準備などを指導します。 </font><br>
                ここでは、想像を超える幸せが見つかります！ ！ ！ </p>
        </div>
    </div>
</div>

.main-left-bottoms{幅: 100%;最小高さ: 280px;上マージン: 10px;}
.main-left-bottoms h1{color: orangered;font-style: italic;}
.main-left-bottoms #タブ{幅: 99%;パディング:5px;最小高さ: 280px;}
.main-left-bottoms #tabs ul{list-style:none;display:block;min-height:30px;line-height:30px;border-bottom:2px red solid;}
.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 #タブ ul li.on{border-bottom:2px solid skyblue;}
.main-left-bottoms #タブ div{min-height: 199px;line-height:25px;border-top:none;padding:0.3125em;overflow:hidden;}
#タブ div p{フォントサイズ: 0.838rem;}
#タブ div ol li{フォントサイズ: 0.875rem;マージン上部: 5px;}
#tabs div ol li a{color: lightcoral;text-decoration: none;}
#タブ div ol li a:hover{color: orange;}
.main-left-bottoms .hide{display:none;}

<div class="タブナビゲーションバー">
    <ナビ>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">タイトル{{i + 1}}</a>
    </nav>
    <div>
        <ul ref="タブ" :style="`--tab-count: ${list.length}`">
            <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">私はコンテンツ {{i + 1} です}</li>
        </ul>
    </div>
</div>

.タブナビゲーションバー{
    ディスプレイ: フレックス;
    オーバーフロー: 非表示;
    境界線の半径: 10px;
    幅: 300ピクセル;
    高さ: 200px;
    ナビゲーション{
        ディスプレイ: フレックス;
        高さ: 40px;
        背景色: #f0f0f0;
        行の高さ: 40px;
        テキスト配置: 中央;
        {
            フレックス: 1;
            カーソル: ポインタ;
            遷移: すべて 300 ミリ秒;
            ＆。アクティブ {
                背景色: #3c9;
                色: #fff;
            }
        }
    }
    div {
        フレックス: 1;
        ul {
            --タブインデックス: 0;
            --tab-width: calc(var(--tab-count) * 100%);
            --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
            ディスプレイ: フレックス;
            flex-wrap: nowrap;
            幅: var(--tab-width);
            高さ: 100%;
            変換: translate3d(var(--tab-move), 0, 0);
            遷移: すべて 300 ミリ秒;
        }
        li {
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            フレックス: 1;
            背景色: var(--bg-color);
            フォントの太さ: 太字;
            フォントサイズ: 20px;
            色: #fff;
        }
    }
}

エクスポートデフォルト{
    データ（） {
        戻る {
            インデックス: 0,
            リスト: ["#09f", "#f90", "#66f", "#f66"]
        };
    },
    メソッド: {
        選択(i) {
            this.index = i;
            this.$refs.tabs.style.setProperty("--tab-index", i);
        }
    }
};

<ul class="ストリップロード">
	<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>

.ストリップロード{
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    幅: 200ピクセル;
    高さ: 200px;
    li {
        --time: calc(var(--line-index) * 200ms);
        境界線の半径: 3px;
        幅: 6px;
        高さ: 30px;
        背景色: #f66;
        アニメーション: beat 1.5s easy-in-out var(--time) infinite;
        & + li {
            左マージン: 5px;
        }
    }
}
@keyframes ビート {
    0%、
    100% {
        変換: scaleY(1);
    }
    50% {
        変換: scaleY(.5);
    }
}

<ボタンクラス="track-btn">
	<span>若者よ、私をクリックすれば私はあなたに力を与えるでしょう</span>
</ボタン>

.トラックボタン{
	マージン: 0;
	パディング: 0;
	/*カスタム境界線*/
	境界線: 0;
	/*クリック時のデフォルトの青い枠線効果を削除します*/
	アウトライン: なし;
	-webkit-appearence: なし;
	オーバーフロー: 非表示;
	位置: 相対的;
	境界線の半径: 25px;
	高さ: 49.9px;
	背景色: #66f;
	カーソル: ポインタ;
	行の高さ: 50px;
	テキスト配置: 中央;
	フォントの太さ: 太字;
	フォントサイズ: 18px;
	色: #fff;
	パディング: 0 20px;
	スパン {
		位置: 相対的;
		ポインタイベント: なし;
	}
	＆：：前に {
		--サイズ: 0;
		位置: 絶対;
		左: var(--x);
		上: var(--y);
		幅: var(--size);
		高さ: var(--size);
		背景画像: 放射状グラデーション(円の最も近い側、#09f、透明);
		コンテンツ： "";
		変換: translate3d(-50%, -50%, 0);
		遷移: 幅 200 ミリ秒の緩和、高さ 200 ミリ秒の緩和。
	}
	&:hover::before {
		--サイズ: 200px;
	}
}

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

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

// スタイル内の CSS3 変数値を参照/変更します。documentElement.style.setProperty("name", value)

#角度{
	--角度: "";
}
#角度:チェック済み{
	 --angular: "角度";
}

：根 { 
	--サイズ: 1.5em; 
} 
@media (最小幅: 30em) { 
	：根 { 
		--サイズ: 2em; 
	} 
} 
。容器 {
	マージン: 0 自動; 
	最大幅: 60em; 
	フォントサイズ: var(--size); 
}