>  기사  >  웹 프론트엔드  >  HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)

HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)

坏嘻嘻
坏嘻嘻원래의
2018-09-30 11:23:123280검색

우리는 웹을 탐색할 때 종종 프롬프트 상자 스타일을 보게 됩니다. 프롬프트 상자는 명확한 탐색 역할을 할 뿐만 아니라 웹 공간을 차지하지 않고도 숨겨진 정보를 표시할 수 있습니다. 프론트 엔드 개발 과정에서는 프롬프트 도구 작성을 이해해야 합니다. 따라서 이 기사에서는 프롬프트 상자의 특수 효과, 즉 페이드인 효과가 있는 프롬프트 상자를 보여 드리겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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>

효과는 그림과 같습니다.

HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)

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>

효과는 그림과 같습니다.

HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)

Summary

HTML에서 컨테이너 요소(예:

)를 사용하고 "tooltip" 클래스를 추가합니다. 마우스를
위로 이동하면 프롬프트 정보가 표시됩니다. 그런 다음 프롬프트가 class="tooltiptext"를 사용하여 인라인 요소(예: )에 배치되고 :hover 선택기가 표시됩니다. 지정된 요소
위로 마우스를 이동할 때 팁을 표시하는 데 사용됩니다.

CSS3에서 툴팁 클래스는 위치:상대적을 사용하고 프롬프트 텍스트는 위치 지정 값 위치:절대를 설정해야 합니다. 실제 팁 텍스트에 사용되는 tooltiptext 클래스의 경우 모드가 숨겨집니다. 표시할 요소로 마우스를 이동할 때 너비, 배경색, 글꼴 색상 및 기타 스타일만 설정하면 됩니다.

위 내용은 HTML5+CSS3을 사용하여 페이드인 효과가 있는 프롬프트 상자를 만드는 방법(전체 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.