흥미로운 텍스트 액체 채우기 효과를 얻기 위한 HTML/css
- 藏色散人원래의
- 2021-08-30 14:26:192290검색
이전 글에서 "CSS를 사용하여 회전 반경을 동적으로 조정하는 방법은 무엇입니까? 》CSS를 사용하여 회전 반경을 동적으로 조정하는 효과에 대해 소개합니다. 관심 있는 친구는 이에 대해 배울 수 있습니다~
이 기사에서는 특히 흥미로운 구현 효과를 가져올 것입니다. 모두가 언급한 "텍스트 액체 채우기"에 관심이 있습니다. 제목. 효과" 혹시 아이디어가 있으신가요?
먼저 아래 그림과 같이 이 효과가 어떻게 보이는지 살펴보겠습니다.
전체 HTML/CSS 코드로 직접 이동해 보겠습니다.
참고: 액체 채우기 텍스트 애니메이션은 다음을 사용할 수 있습니다. CSS: :선택자가 완료되기 전에. 키프레임을 사용하여 애니메이션의 각 프레임 높이를 설정하겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
margin: 200px 0;
padding: 0;
font-size: 80px;
position: relative;
color: #45b1ff;
}
h1:before {
content: "PHP中文网";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:white;
overflow: hidden;
animation: animate 6s infinite;
}
@keyframes animate {
0% {
height: 25%;
}
25% {
height: 50%;
}
50% {
height: 65%;
}
75% {
height: 40%;
}
100% {
height: 25%;
}
}
</style>
</head>
<body>
<center>
<h1>PHP中文网</h1>
</center>
</body>
</html>이 코드를 실행했을 때의 효과는 위 그림과 같습니다.
이 효과를 얻으려면 CSS의 :before 선택기와 @keyframes 규칙에 익숙해야 합니다.
:선택기 전:
:선택기가 선택한 요소의 내용 앞에 내용을 삽입하기 전 내용 속성을 사용하여 삽입할 내용을 지정하려고 합니다.
참고: IE8 및 이전 버전에서는 1a309583e26acea4f04ca31122d8c535
@keyframes 규칙을 선언해야 합니다.
@keyframes 규칙을 사용하면 CSS에서 점진적으로 변경하여 애니메이션을 만들 수 있습니다. 스타일이 다른 스타일로 설정되었습니다. 애니메이션 중에 CSS 스타일 설정을 여러 번 변경할 수 있습니다. % 또는 0% ~ 100%와 동일한 키워드 "from" 및 "to"를 사용하여 변경이 발생하는 시기를 지정합니다. 0%는 애니메이션이 시작되는 시점이고, 100%는 애니메이션이 종료되는 시점입니다. 최상의 브라우저 지원을 위해 항상 0%와 100%에 대한 선택기를 정의해야 합니다.
참고: 애니메이션 속성을 사용하여 애니메이션의 모양을 제어하고 선택기를 사용하여 애니메이션을 바인딩합니다.
PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있습니다. "css 비디오 튜토리얼"과 "HTML 비디오 튜토리얼"을 배우는 것을 환영합니다!
위 내용은 흥미로운 텍스트 액체 채우기 효과를 얻기 위한 HTML/css의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!