How to Create Neon Text With CSS-読み出し
14850 ワード
How to Create Neon Text With CSS
https://css-tricks.com/how-to-create-neon-text-with-css/
cssプロパティを使用してネオンを作成する
네온사인 글자를 웹사이트에 추가해서 웹페이지를 꾸며볼 수 있다 반짝이는 효과를 준 문자를 만들고 애니메이션을 추가해서 네온사인의 느낌을 줄 수 있다1.点滅効果をテキストに入れる
「text-shadow」で文字の点滅効果を作成します.
text-shadow-スペースで区切り、追加時に(カンマ)で区切ります.
text-shadow: [x-offset][y-offset] [blur-radius][color];
1、2番目の値はデフォルトの0値で、blur値と希望の色と白を設定する必要があります.
文字のボケは昇順で、1-3番が白4~10番が欲しい色です.
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
<title>neon</title>
<style>
body {
background-color: rgb(5, 5, 5);
}
div {
font-family: 'Sacramento', cursive;
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
font-style: italic;
}
.text p {
font-size: 54px;
font-weight: 400;
text-align: center;
color: #fff;
margin: 0;
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px rgb(207, 51, 147),
0 0 82px rgb(207, 51, 147),
0 0 92px rgb(207, 51, 147),
0 0 102px rgb(207, 51, 147),
0 0 151px rgb(207, 51, 147);
}
</style>
</head>
<body>
<div class="text">
<p>Lets </p>
<p>Party</p>
</div>
</body>
</html>やってみます.チークのサイズを調整したり、アニメーションを追加したりしてみましょう.
2.フリッカ効果を作る
@keyframes flicker {
0%, 16%, 26%, 30%, 58%, 64%, 100% {
text-shadow:
0 0 7px #fff,
0 0 10px rgb(207, 51, 147),
0 0 21px rgb(207, 51, 147),
0 0 42px rgb(207, 51, 147),
0 0 82px rgb(207, 51, 147),
0 0 92px rgb(207, 51, 147),
0 0 102px rgb(207, 51, 147),
0 0 151px rgb(207, 51, 147);
}
22%, 28%, 60% {
text-shadow: none;
}
}
.text p {
animation: flicker 1.5s infinite alternate;
color: #fff;
}
距離を縮める.
3.繰り返し移動する効果を作る
@keyframes flicker {
100% {
text-shadow:
0 0 4px rgb(0, 72, 255),
0 0 11px rgb(0 54 196),
0 0 18px rgb(0 54 196),
0 0 40px rgb(0 54 196),
0 0 80px rgb(0 54 196),
0 0 90px rgb(0 54 196),
0 0 100px rgb(0 54 196),
0 0 150px rgb(0 54 196);
}
0% {
text-shadow:
0 0 4px rgb(0, 72, 255),
0 0 12px rgb(0 54 196),
0 0 15px rgb(0 54 196),
0 0 38px rgb(0 54 196),
0 0 73px rgb(0 54 196),
0 0 80px rgb(0 54 196),
0 0 94px rgb(0 54 196),
0 0 160px rgb(0 54 196);
}
}
.text p {
font-size: 72px;
text-align: center;
color: rgb(255, 248, 252);
margin: 0;
animation: flicker 0.13s ease-in infinite alternate;
text-shadow:
0 0 7px rgb(255, 248, 252),
0 0 10px rgb(255, 248, 252),
0 0 21px rgb(255, 248, 252),
0 0 42px rgb(0 54 196),
0 0 82px rgb(0 54 196),
0 0 92px rgb(0 54 196),
0 0 102px rgb(0 54 196),
0 0 151px rgb(0 54 196);
}参照ドキュメントを表示および作成します.テキスト1,2,3テキスト-シャドウは白に近いです.
アニメーションtext-shadowに欲しい色の値だけを追加し、
最初のアニメーションtext-shadowはもっと明るい色を加えました
ネオンとあまり差がないように作ってみましたが、効果が良かったので、面白い体験ができました.
クロム開発者ツールを使用してチークを調整し、さまざまな試みを行うことができます.
Reference
この問題について(How to Create Neon Text With CSS-読み出し), 我々は、より多くの情報をここで見つけました https://velog.io/@seungyeons/How-to-Create-Neon-Text-With-CSS-읽기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol