HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)
- 坏嘻嘻원래의
- 2018-09-30 11:23:123315검색
우리는 웹을 탐색할 때 종종 프롬프트 상자 스타일을 보게 됩니다. 프롬프트 상자는 명확한 탐색 역할을 할 뿐만 아니라 웹 공간을 차지하지 않고도 숨겨진 정보를 표시할 수 있습니다. 프론트 엔드 개발 과정에서는 프롬프트 도구 작성을 이해해야 합니다. 따라서 이 기사에서는 프롬프트 상자의 특수 효과, 즉 페이드인 효과가 있는 프롬프트 상자를 보여 드리겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
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에서 컨테이너 요소(예:
)를 사용하고 "tooltip" 클래스를 추가합니다. 마우스를
위로 이동하면 프롬프트 정보가 표시됩니다. 그런 다음 프롬프트가 class="tooltiptext"를 사용하여 인라인 요소(예: )에 배치되고 :hover 선택기가 표시됩니다. 지정된 요소
위로 마우스를 이동할 때 팁을 표시하는 데 사용됩니다.
CSS3에서 툴팁 클래스는 위치:상대적을 사용하고 프롬프트 텍스트는 위치 지정 값 위치:절대를 설정해야 합니다. 실제 팁 텍스트에 사용되는 tooltiptext 클래스의 경우 모드가 숨겨집니다. 표시할 요소로 마우스를 이동할 때 너비, 배경색, 글꼴 색상 및 기타 스타일만 설정하면 됩니다.
위 내용은 HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.