CSS - 통통 튀는 글자 효과

글자 효과

통통 튀는 글자의 효과를 만들어 봅시다~

---

CSS

@font-face {
    font-family: 'EF_Hyunygothic';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.eot?#iefix') format('embedded-opentype'),
            url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.woff2') format('woff2'),
            url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.woff') format('woff'),
            url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.ttf') format("truetype");
    font-display: swap;
}


html,body {
    width: 100%;
    height: 100%;
    background:linear-gradient(160deg, #FFE6F7 0%, #FF9494 100%);
    display: flex;
    justify-content: center;
    align-items:center;
    font-family: 'EF_Hyunygothic';
}
h1 {
    height: 100px
}
h1 span {
    font-size: 80px;
    color: #fff;
    position: relative;
    top: 20px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    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,0.4);
    animation: bounce 0.3s ease infinite alternate;
}
h1 span:nth-child(2){animation-delay: 0.1s;}
h1 span:nth-child(3){animation-delay: 0.2s;}
h1 span:nth-child(4){animation-delay: 0.3s;}
h1 span:nth-child(5){animation-delay: 0.4s;}
h1 span:nth-child(6){animation-delay: 0.5s;}
h1 span:nth-child(7){animation-delay: 0.6s;}
h1 span:nth-child(8){animation-delay: 0.7s;}
@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 transparent,
                    0 7px 0 transparent,
                    0 8px 0 transparent,
                    0 9px 0 transparent,
                    0 50px 25px rgba(0,0,0,0.4);
    }
}

결과

---

코드팬 보기