ボーダーストリーマー効果（マーキー効果）を実現する純粋なCSS

まずは最後のレンダリング

夜の街路の看板に非常に似ていることがわかりましたか。CSS を使用してそれを実現する方法を見てみましょう

構造解析

まず、ボックスを使用してテキストを詰め込み、テキストを中央に配置する必要があることは明らかです。次に、ボックスの周囲に 2 つのライトバンドがあることがわかります。では、これら 2 つのライトバンドはどのように実現されるのでしょうか。

実際には、これは 4 つの小さなボックスを使用して実現されます。これら 4 つの小さなボックスを大きなボックスの周囲 (大きなボックスの内壁近く) に配置し、これらの小さなボックスを使用してストリーマー (マーキー) 効果を実現します。

次に、具体的なコードの実装を見てみましょう。

コード

HTML構造

まず、div大スローガン用の箱と、マーキー用の小さな箱を 4 つ用意します。

	<div class="main">
		跑马灯
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

大きなボックスのスタイルを設定して、ブラウザで表示できるようにします。

	body {
		background-color: #000;
	}

	.main {
		position: absolute;
		width: 400px;
		height: 150px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);//当为百分百单位时，相对的是自身的宽高
		overflow: hidden; //溢出部分隐藏
		text-align: center;
		line-height: 150px;
	    background-color: transparent;
		color: aquamarine;
		font-size: 30px;
		font-family: '宋体';
	}

現在の効果はこんな感じ

次に、大きなボックスの照明効果を設定します。

室内照明効果

エフェクト画像では、ライトの尾の色が明るくなり、頭の色が明るくなり、トランジション効果が示されていることがわかりますが、この効果はどのように実現されますか?

backgroundここでは、 css3 で新しい属性値を使用する必要がありますlinear-gradient: , この属性を通じて、ボックスの背景色として複数の色を設定でき、トランジション効果もあります。より強力なのは、この属性値を設定できることです。グラデーションの方向。

文法：linear-gradient(渐变方向,color1,color2,color3...)

ここでは#fff、#acd、シアングラデーションの3色を選択しました

次に、この属性値の使用を開始します。これは、小さなボックスの 1 つ (上部) の効果であり、他の効果も同様の方法で実装されます。

	.main div {
		position: absolute;
	}

	.main :nth-child(1) {
		top: 0;
		left: 0;
		width: 100%;    //与父盒子等宽
		height: 2px;    //高要设置得较小
		background: linear-gradient(to right, #fff, #acd, cyan);
	}

これは上部の照明効果です。topとleftのプロパティを使用してボックスの位置を設定します。を使用しwidth:100%てボックスの幅を大きなボックスと一致させ、を使用してheight:2pxライトバーの幅を 2px に設定します。もちろん、実際のニーズに応じてライトバーの幅を変更することもできます。

残りの 3 つのライトの実装原理は基本的に同じですが、位置と背景色のみが異なります。

残りの右、下、左の背景色のグラデーション方向はto bottom、to left、、です。to top

現在の効果はこんな感じです。

これは私たちが望むマーキー効果にますます近づいています

実際、ライトにアニメーション効果を追加するという最後のステップがまだ完了していません。これは、CSS3 のアニメーションアニメーションプロパティです。

同様に、デモンストレーションとして上部の照明効果も設定します。

css3アニメーション：

	@keyframes run1 {
		from {
			transform: translateX(-100%) //初始让它沿X轴负方向（向左）位移自身的宽度
		}

		to {
			transform: translateX(100%)  //动画结束时，让它回到原位
		}
	}

ボックスをアニメーション化する

.main :nth-child(1) {
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
	    animation: run1 1s linear infinite;//复合属性写法，其中infinite是让动画效果无限循环
		background: linear-gradient(to right, #fff, #acd, cyan);
	}

アニメーションを設定する前は、最も暗い部分が右端にあることがわかりますが、マーキーの実現要件は、最も暗い部分が左から現れてから右に移動することであるため、アニメーションの初期位置は次のようになります。要件が満たされるように、ボックスの長さ全体にわたって左に移動する必要があります。

残りの 3 つのボックスの実装も同様で、設定後、最終的に必要なマーキー効果が得られます。

CSS3アニメーションを理解したい場合は、この記事を読んでください。詳しく説明されています

コード全体は次のとおりです。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	body {
		background-color: #000;
	}

	.main {
		position: absolute;
		width: 400px;
		height: 150px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		text-align: center;
		background-color: transparent;
		line-height: 150px;
		color: aquamarine;
		font-size: 30px;
		font-family: '宋体';
	}

	.main div {
		position: absolute;
	}

	.main :nth-child(1) {
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		animation: run1 1s linear infinite;
		/* animation-delay: 0s;  */
		background: linear-gradient(to right, #fff, #acd, cyan);
	}

	.main :nth-child(2) {
		top: 0;
		right: 0;
		height: 100%;
		width: 2px;
		animation: run2 1s linear infinite;
		/* animation-delay: 1s; 设置动画延迟加载时间*/
		background: linear-gradient(to bottom, #fff, #acd, cyan);
	}

	.main :nth-child(3) {
		bottom: 0;
		left: 0;
		height: 2px;
		width: 100%;
		animation: run3 1s linear infinite;
		/* animation-delay: 2s; 设置动画延迟加载时间*/
		background: linear-gradient(to right, #fff, #acd, cyan);
	}

	.main :nth-child(4) {
		top: 0;
		left: 0;
		height: 100%;
		width: 2px;
		animation: run4 1s linear infinite;
		/* animation-delay: 3s; 设置动画延迟加载时间 */
		background: linear-gradient(to top, #fff, #acd, cyan);
	}

	@keyframes run1 {
		from {
			transform: translateX(-100%)
		}

		to {
			transform: translateX(100%)
		}
	}

	@keyframes run2 {
		from {
			transform: translateY(-100%)
		}

		to {
			transform: translateY(100%)
		}
	}

	@keyframes run3 {
		from {
			transform: translateX(100%)
		}

		to {
			transform: translateX(-100%)
		}
	}

	@keyframes run4 {
		from {
			transform: translateY(100%)
		}

		to {
			transform: translateY(-100%)
		}
	}
</style>

<body>
	<div class="main">
		海绵宝宝
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>

</html>

最後に、この記事があなたのお役に立てば幸いです、アリガド