728x90
반응형
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* 배경색 */
html, body {
width: 100%;
height: 100%;
background: #FF7777;
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-items: center;
}
/* 애니메이션 */
h1 span {
position: relative;
top: 20px;
display: inline-block;
animation: bounce .3s ease infinite alternate;
animation-iteration-count:4;
font-family: 'Titan One', cursive;
font-size: 80px;
color: #FFF;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 transparent,
0 7px 0 transparent,
0 8px 0 transparent,
0 9px 0 transparent,
0 10px 10px rgba(0, 0, 0, .4);
}
/* 애니메이션 순서대로 실행하게 시작 시간 설정하기*/
h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }
h1 span:nth-child(9) { animation-delay: .8s; }
/* 글씨 그림자 */
@keyframes bounce {
100% {
top: -20px;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 #CCC,
0 7px 0 #CCC,
0 8px 0 #CCC,
0 9px 0 #CCC,
0 50px 25px rgba(0, 0, 0, .3);
}
}
</style>
</head>
<body>
<h1>
<span>w</span>
<span>e</span>
<span>b</span>
<span>-</span>
<span>b</span>
<span>l</span>
<span>o</span>
<span>g</span>
<span>!</span>
</h1>
</body>
</html>
통통 튀는 텍스트 애니메이션 효과 / CSS-공유 자료실
See the Pen Skewed title text by Paul Noble 통통 튀는 텍스트 애니메이션 효과 / CSS-#통통튀는글자 #텍스트애니메이션 #CSS효과 #CSS소스 #코드펜 #CODEPEN#민트다이어리 #민트공유자료실 #공유자료실#MINTDIARY
mintdiary.com
728x90
반응형
'Web Programming > CSS' 카테고리의 다른 글
| CSS / 서서히 사라지는 이미지, 서서히 나타는 글씨 (0) | 2021.09.07 |
|---|---|
| CSS / transform:scale() / 마우스 오버(hover) 시 확대되는 이미지 (0) | 2021.07.22 |
| CSS / 문자가 두줄 이상되면 ...으로 처리하기 (0) | 2021.07.05 |
