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など)を変更してご使用ください。