> 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

奋力向前
풀어 주다: 2021-08-20 17:13:08
원래의
3199명이 탐색했습니다.

이전 글 "html을 사용하여 사진에 테두리 효과를 추가하는 방법을 가르치는 한 가지 요령(자세한 코드 설명)"에서 html을 사용하여 사진에 테두리 효과를 추가하는 방법을 소개했습니다. 다음 글에서는 CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 소개합니다.

CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

HTML 코드 소프트웨어를 열고 코드 만들기

1. 여기에 p 태그가 있고, 그런 다음 몇 가지만 쓰고, 기쁠 때는 웃고, 잠을 잘 수 있습니다. 피곤하고, 피곤하면 일어나세요. 그냥 웃으세요, 코드 예시. p标签,然后咱就随便写几个,开心就笑,累了就睡觉,醒了就微笑,代码示例

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>开心就笑,累了就睡觉,醒了就微笑</p>
</body>
</html>
로그인 후 복사

代码效果

CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

代码效果出来了,发现是一个非常标准的一个字体对吧,我想把这个字体变成斜体,那这个东西怎么做呢,来咱们看着。

2、实际上来说有一个样式能帮助到我们叫做font-style,这里边有一个东西叫做italic,这个东西能直接帮助咱们把这个文字变成斜体,代码示例。

<style type="text/css">
    p{font-style: italic;}
 
</style>
로그인 후 복사

代码效果

CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

代码效果出来了,发现这文字还真的倾斜,这就是一个文字的一个斜体,它还有一个其他的一个方式叫做oblique这两种方式都能让这个文字变成倾斜 ,但是它们两个看着像是都一样 ,来咱们可以看一眼,代码示例。

p{font-style: oblique;}
로그인 후 복사

代码效果

CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

代码效果出来了,感觉跟刚才那个差不多对吧 ,不过我想要做火焰效果,那怎么做?

3、将【倾斜】标签先删除,然后在head标签之间加入<style type="text/css"></style>这串代码然后在style标签中输入文本的水平对齐方式、字体、颜色、阴影,代码示例。

p{
text-align:center;
font:bold 60px Arial, Helvetica, sans-serif;
color: red;
text-shadow: 0 0 4px white,
2px -5px 4px #ff3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
로그인 후 복사

代码效果

CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

4、为了增强火焰效果,这里把背景颜色设置成黑色,在style

body{background-color:#000;}
로그인 후 복사
코드 효과


WeChat 스크린샷_20210820155151.jpg

코드 효과가 나오더니 아주 표준적인 글꼴이군요. 이 글꼴을 이탤릭체로 바꾸고 싶은데 어떻게 해야 하나요? ? 와서 지켜보자. CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).

2. 실제로 이 텍스트를 기울임꼴로 변환하는 데 도움이 되는 글꼴 스타일이라는 스타일이 있습니다. 코드 예.

rrreee코드 효과

WeChat 스크린샷_20210820155656 .jpg 🎜🎜코드 효과가 나왔는데 텍스트가 정말 기울어져 있는 것을 발견했습니다. 이것은 텍스트의 이탤릭체입니다. oblique라는 또 다른 방법도 있습니다. 두 방법 모두 동일합니다. 텍스트가 기울어질 수 있지만 둘 다 동일하게 보입니다. 코드 예제를 살펴보겠습니다. 🎜rrreee🎜코드 효과🎜🎜WeChat 스크린샷_20210820155928 .jpg 🎜🎜코드효과가 나왔어요. 지금이랑 거의 비슷한 느낌인데 불꽃효과를 내고 싶은데 어떻게 해야하나요? 🎜🎜3. 먼저 [Tilt] 태그를 삭제한 다음 head 태그 사이에 <style type="text/css"></style>를 추가한 다음 를 추가합니다. >style 태그의 입력 텍스트 정렬, 글꼴, 색상 및 그림자, 코드 예. 🎜rrreee🎜코드 효과🎜🎜WeChat 스크린샷_20210820161316 .jpg 🎜🎜4. 불꽃 효과를 강화하려면 배경색을 검정색으로 설정하고 style 태그에 🎜rrreee🎜code effect🎜🎜🎜🎜🎜🎜를 입력하세요. 추천 학습: 🎜 CSS 비디오 튜토리얼 🎜🎜

위 내용은 CSS를 사용하여 텍스트에 불꽃 효과를 추가하는 방법을 단계별로 가르쳐줍니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿