CSS3+html5를 사용하여 텍스트 네온 효과를 만드는 방법(전체 코드 지불)
- 坏嘻嘻원래의
- 2018-09-30 10:12:584721검색
오늘날 기술이 발전함에 따라 사람들은 미적 측면에 대해 점점 더 까다로워지고 있으며 이로 인해 프론트엔드 개발에 대한 태도가 더욱 엄격해지고 동시에 목적을 달성하기 위해 신선한 요소를 추가해야 합니다. 관심을 끌기 때문이죠. 그래서 오늘 이 글은 css3+html5를 사용하여 텍스트 네온 효과를 만드는 방법을 보여드릴 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 분들에게 도움이 되기를 바랍니다.
CSS3+html5를 사용하여 텍스트 네온 효과를 만드는 기능
텍스트에 깜박이는 네온 애니메이션이 있으며 텍스트를 선택하면 멋진 애니메이션 효과도 있습니다.
텍스트를 동적으로 입력할 수 있습니다. , 입력된 텍스트는 실시간으로 네온 조명 효과로 렌더링됩니다.
css3+html5를 사용하여 텍스트 네온 효과를 만드는 단계
특수 효과와 함께 추가해야 하는 텍스트를 입력하세요.
박스섀도의 다층 그림자 속성을 활용해 네온관의 입체감을 그려보세요.
텍스트 그림자를 사용하여 여러 레이어의 그림자 그리기, 텍스트 튜브 그리기, 빛 방출 및 투영을 통해 3차원 텍스트 설정 효과를 얻을 수 있습니다.
-
여기에서는 네온 깜박임 효과를 얻는 원리에 중점을 둡니다
텍스트에 두 개의 레이블을 설정하고 완전히 겹치도록 해야 합니다. 상위 레이어는 라이트 튜브 효과를 구현하고 하위 레이어는 후광 효과를 사용한 다음 장치가 계속 깜박이게 만드는 동시에 꺼짐과 켜짐의 두 가지 상태에 대한 텍스트 그림자 속성 값을 설정하여 서로 다른 속도로 전환하도록 해야 합니다. 네온 깜박이는 효과를 형성합니다.
참고: 위 내용이 이해되지 않으면 이 사이트의 다른 기사를 확인할 수 있습니다.
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>텍스트 네온 효과는 그림과 같습니다
Summary
처음에는 텍스트 네온 조명 효과가 gif 애니메이션 같다고 생각했는데, 요소들을 검토해보니 실제로 html5 + CSS3 애니메이션을 사용하여 구현된 것을 발견했는데, 바로 깨달음을 얻었습니다. 나의(hao) 욕망(qi) 욕망(xin)을 갖고 있기로 결정했습니다. 코드를 살펴본 후 원리가 매우 간단하다는 것을 알았습니다. 이 기사의 내용이 모든 사람에게 도움이 되기를 바랍니다.
위 내용은 CSS3+html5를 사용하여 텍스트 네온 효과를 만드는 방법(전체 코드 지불)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!