CSS3을 사용하여 글꼴 내부 광선 효과를 얻는 방법(자세한 설명)-CSS 튜토리얼-php.cn

CSS3을 사용하여 글꼴 내부 광선 효과를 얻는 방법(자세한 설명)

坏嘻嘻

풀어 주다： 2018-09-28 10:54:11

원래의

7394명이 탐색했습니다.

인터넷이 나날이 발전하는 현대 사회에서 사람들은 웹 사용자 경험에 대한 요구가 점점 더 높아지고 있으며, 이로 인해 그림자 효과, 글로우 효과 등과 같은 특수 효과의 파생물이 더 많아지고 있습니다. 이 글에서는 소개하겠습니다. CSS3는 특정 참조 가치가 있는 글꼴 조명의 특수 효과를 달성하므로 도움이 필요할 수 있습니다.

css3를 사용하여 글꼴 빛나는 효과의 원리 달성

먼저 특수 효과를 추가해야 하는 텍스트를 입력해야 합니다.
그럼 우리가 이해해야 할 것은 CSS3 자체에는 발광 효과 속성이 없지만 text-shadow 속성을 통해 발광 효과를 얻을 수 있으므로 이제 text-shadow 속성에 집중하겠습니다.

text-shadow 속성의 기본 구문: text-shadow: h-shadow v-shadow 흐림 색상

h-shadow: 수평 그림자의 위치(수평 오프셋) 그림자), 이는 음수 값일 수 있습니다. v-shadow: 수직 그림자의 위치(그림자의 수직 오프셋). 음수 값일 수 있습니다.

blur: 그림자 흐림 거리(기본값은 0).

color: 그림자 색상, 일반적으로 글꼴 색상이 기본값입니다.

또한 텍스트 그림자의 또 다른 기능인 여러 그림자를 동시에 설정하는 기능도 사용할 수 있습니다(여러 그림자를 구분하려면 쉼표를 사용하세요). 이 기능은 현재로서는 많이 소개되지 않을 것입니다.

글꼴 빛나는 효과를 얻기 위해 CSS3를 사용한 예

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发光字体</title>
<style type="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all 0.1s;
     text-shadow:1px 1px 1px #00FF00;}
p:hover{ text-shadow:6px 6px 6px #00FF00;}
</style>
</head>
<body><p align="center">PHP中文网</p>
</body>
</html>

로그인 후 복사

글꼴 빛나는 효과는 그림과 같습니다 CSS3을 사용하여 글꼴 내부 광선 효과를 얻는 방법(자세한 설명)