ホームページ > 記事 > ウェブフロントエンド > css3+html5を使用してテキストネオン効果を作成する方法（フルコードを支払う）
css3+html5を使用してテキストネオン効果を作成する方法（フルコードを支払う）
- 坏嘻嘻オリジナル
- 2018-09-30 10:12:584633ブラウズ
現在、科学技術の発展に伴い、人々の美学に対するこだわりがますます高まっており、フロントエンド開発に対する姿勢をより厳格にすると同時に、新たな要素を加える必要があります。注目を集めるという目的を達成するための要素。そこで今回は、css3 html5 を使用してテキストのネオン効果を作成する方法を説明します。必要な方は参考にしていただければ幸いです。
css3 html5 を使用してテキスト ネオン効果を作成する機能
テキストには点滅するネオン アニメーションがあり、テキスト 選択するとクールなアニメーション特殊効果もあります。
テキストは動的に入力でき、入力テキストはリアルタイムでネオン ライト効果でレンダリングされます。
css3 html5 を使用してテキスト ネオン効果を作成する手順
特殊効果を追加する必要があるテキストを入力します。
box-shadow のマルチレイヤー シャドウ プロパティを使用して、ネオン管の 3 次元効果を描画します。
text-shadow マルチレイヤー シャドウを使用して、テキスト チューブを描画し、光を放射し、投影して、3 次元テキストを設定する効果を実現します。
-
ここでは、ネオンの点滅効果を実現する原理に焦点を当てます。
テキストに 2 つのラベルを設定し、それらを完全に重ねる必要があります。 、上の層はランプ効果を実装し、下の層はハロー効果を実装し、セレクターを使用して連続的に点滅させると同時に、2 つの text-shadow 属性値を設定する必要があります。オフとオンの状態が異なる速度で切り替わり、ネオンの点滅効果が形成されます。
注: 上記の内容がわからない場合は、このサイトの他の記事を確認してください。
使い方画像の簡単な影効果を実現する css3 (完全なコードが添付されています)
css3 を使用してフォント内で光彩効果を実現する方法 (詳細な説明)
css3 を使用します。html5 を使用してテキスト ネオン ライト効果を作成するコード##
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 html5文字霓虹灯交替闪烁效果</title>
<style>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #222;
background-image: -webkit-radial-gradient(circle, #333, #222, #111);
background-attachment: fixed;
overflow: hidden;
font-family: 'Wire One', sans-serif;
font-size: 6em;
color: #FFF;
line-height: normal;
text-align: center;
}
#glow {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 1em;
margin: auto;
display: block;
}
#glow p,
#glow span{
display: inline-block;
color: #FFF;
text-shadow: 0 0 15px;
}
#glow p:nth-child(odd) {
-webkit-animation: bglow .3s ease infinite;
}
#glow p:nth-child(even) {
-webkit-animation: rglow .3s ease infinite;
}
@-webkit-keyframes bglow {
0% {
color: rgb(0, 135, 211);
text-shadow: 0 0 15px;
}
}
@-webkit-keyframes rglow {
100% {
color: rgb(233, 54, 40);
text-shadow: 0 0 15px;
}
}
</style>
<script>
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
</head>
<body>
<section id="glow">
<p>P</p>
<p>H</p>
<p>P</p>
<p>中</p>
<p>文</p>
<p>网</p>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage('resize', "*");
}
</script>
</body>
</html>
#テキスト ネオン ライト効果は図に示すとおりです
概要#最初、私は本文を考えました。ネオン効果は gif アニメーションか何かでしたが、要素を確認したところ、実際には html5 が使用されていることがわかりました。 CSS3 アニメーションの実装はすぐに私の (hao) 欲求 (qi) の欲求 (xin) を呼び起こしたので、調べてみることにしました。コードを確認したところ、原理は非常に単純であることがわかりました。この記事の内容が皆さんのお役に立てれば幸いです。
以上がcss3+html5を使用してテキストネオン効果を作成する方法（フルコードを支払う）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。