<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>말풍선 애니메이션</title>
<style>
.speech-bubble {
position: relative;
background: #ffffff;
border: 2px solid #00e5ff;
border-radius: 10px;
padding: 10px 20px;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 16px;
color: #000;
/* 빛나는 효과 */
box-shadow: 0 0 15px 5px rgba(0, 229, 255, 0.6);
/* 애니메이션 추가 */
animation: glow 3s ease infinite;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -12px;
left: 20px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #00e5ff transparent;
display: block;
width: 0;
}
.speech-bubble::before {
content: '';
position: absolute;
bottom: -10px;
left: 22px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #ffffff transparent;
display: block;
width: 0;
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 15px 5px rgba(0, 229, 255, 0.6);
opacity: 1;
}
50% {
box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="speech-bubble">
AI에게 문의하세요!
</div>
</body>
</html>챗 지피티에게 이 이미지를 보여주고 html 과 Css 로 구현해 달라고 했을 때의 결과물?!
정말이지 GPT 덕에 빨라지는 퍼블리싱... ㅎㄷㄷ
728x90
반응형
'ETC' 카테고리의 다른 글
| 그림이 들리고 음악이 보이는 순간. 노엘라 (1) | 2024.11.17 |
|---|---|
| 마음의 수수께끼를 풀어드립니다. (2) | 2024.11.15 |
| 터미널이란? , 주요 사용 명령어 (0) | 2024.07.29 |
| 캐스트 퍼즐이란? (데블스 플랜 감옥퀴즈) (0) | 2023.10.06 |
| 구글 애널리틱스, 재방문 수 확인 (DAU/WAU) 월간/일일 사용자 수 (1) | 2023.08.03 |
댓글