TikTok風サイバー見出し

DEMO

TikTok TikTok TikTok
HTMLとCSSをまとめてコピーする

HTML

		<div class="cyber">
 <span class="cybertext moji1">TikTok</span>
 <span class="cybertext moji2">TikTok</span>
 <span class="cybertext moji3">TikTok</span>
</div>
		
HTMLをコピーする

HTML説明

タイトルの設定方法
「TikTok(2.3.4行目)」のテキストを任意の文字に書き換えてください。
各色の数テキストが必要なので、3か所に同じ文を入れてください。

CSS

		<style>
.moji1 {
 text-align: center;
 color: #25f4ee;
 position: absolute;
 top: 1px;
 left: 3px;
}
.moji2 {
 position: absolute;
 top: 5px;
 left: 8px;
 color: #fe2c55;
}
.moji3 {
 position: absolute;
 top: 3px;
 left: 5px;
 color: #000000;
}
.cybertext {
 font-size: 4rem;;
 font-weight: bold;
 margin: 0 auto;
 width: 100%;
}
.cyber {
 position: relative;
 margin: 0 auto;
 width: 100%;
 max-width: 580px;
 margin-bottom: 37px;
}
</style>
		
cssをコピーする

CSS説明

文字サイズの変更方法
「4rem(22行目)」のテキストを任意の文字に書き換えてください。
数字を上下させたり、単位(px/emなど)を変更してご使用ください。