<!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
반응형
'퍼블리싱' 카테고리의 다른 글
| [웹폰트 사용방법] 웹에 최적화된포맷 - woff2 (0) | 2024.08.29 |
|---|---|
| [css]Flex아이템 li 요소 4개씩 한 줄에 배치하기 (0) | 2024.08.26 |
| [CSS] 변수를 음수로 변환하는 방법 (0) | 2024.08.02 |
| [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 (0) | 2024.06.25 |
| [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) (0) | 2024.06.19 |
댓글