반응형
기가막힌 말풍선을 개발했다.
w3school에서 바로 돌려볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/* 말풍선 적절한 top 과 margin-left 로 위치조정 */
.bubble{
opacity:0;
transition-property:opacity 2s ease-in-out 2s;
transition-duration:1s;
}
#test111:hover ~ .bubble
{
opacity:1;
z-index:100;
position: relative;
height: auto;
padding: 10px 10px 10px 10px;
background: #FFFFFF;
border-radius: 5px;
border: #7F7F7F solid 1px;
position: absolute;
font-size: 16px;
text-align: left;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 16px 20px 17.5px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -18.5px;
left: 49px;
}
.bubble:before
{
opacity:1;
content: '';
position: absolute;
border-style: solid;
border-width: 0 16px 20px 17.5px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
top: -20px;
left: 49px;
}
</style>
</head>
<body>
<div>
<h1 id="test111">This is a Heading</h1>
<div class="bubble">말풍선 테스트</div>
</div>
</body>
</html>
반응형