우리는 웹을 탐색할 때 종종 프롬프트 상자 스타일을 보게 됩니다. 프롬프트 상자는 명확한 탐색 역할을 할 뿐만 아니라 웹 공간을 차지하지 않고도 숨겨진 정보를 표시할 수 있습니다. 프론트 엔드 개발 과정에서는 프롬프트 도구 작성을 이해해야 합니다. 따라서 이 기사에서는 프롬프트 상자의 특수 효과, 즉 페이드인 효과가 있는 프롬프트 상자를 보여 드리겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
HTML5+CSS3를 사용하여 페이드인 효과가 있는 프롬프트 상자 만들기
1단계: 기본 프롬프트 상자 설정
코드는 다음과 같습니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* 定位 */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div> </body> </html>
효과는 그림과 같습니다.
2단계: CSS3 전환 속성과 불투명도 속성을 사용하여 프롬프트 도구의 페이드인 효과를 얻습니다.
코드는 다음과 같습니다. follow
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* 淡入 - 1秒内从 0% 到 100% 显示: */ opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <body style="text-align:center;"> <h2>淡入效果</h2> <p>鼠标移动到以下元素,提示工具会再一秒内从 0% 到 100% 完全显示。</p> <div class="tooltip">PHP中文网 <span class="tooltiptext">666666666666</span> </div> </body> </html>
효과는 그림과 같습니다.
Summary
HTML에서 컨테이너 요소(예:
CSS3에서 툴팁 클래스는 위치:상대적을 사용하고 프롬프트 텍스트는 위치 지정 값 위치:절대를 설정해야 합니다. 실제 팁 텍스트에 사용되는 tooltiptext 클래스의 경우 모드가 숨겨집니다. 표시할 요소로 마우스를 이동할 때 너비, 배경색, 글꼴 색상 및 기타 스타일만 설정하면 됩니다.
위 내용은 HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!