Делаем анимированный текст с тенью

Анимированный объемный текст с тенью на одном CSS3.
ВАУ!!! СКАЧЕМ
HTML
<h3 class="one">ВАУ!!! СКАЧЕМ</h3>
CSS cтили
@import url(https://fonts.googleapis.com/css?family=Righteous); h3.one { cursor: default; position: absolute; top: 30px; left: 0; right: 0; bottom: 0; height: 100px; margin: auto; display: block; -webkit-animation: bounce .3s ease infinite alternate; font-family: 'Chewy', cursive; font-size: 80px; color: #FFF; text-align: center; line-height: 100px; 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, .6); }@-webkit-keyframes bounce { 100% { top: -30px; 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 30px 30px rgba(0, 0, 0, .3); } }
dang!
HTML
<h3 class="two" data-shadow="dang!">dang!</h3>
CSS cтили
@import url( 'https://fonts.googleapis.com/css?family=Chewy' ); h3.two { display: inline-block; color: white; font-family: 'Righteous', serif; font-size: 12em; text-shadow: .03em .03em 0 hsla(230,40%,50%,1); z-index: 10; } h1:after { content: attr(data-shadow); position: absolute; top: 10px; left: 10px; z-index: -1; text-shadow: none; background-image: linear-gradient( 45deg, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0 ); background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shad-anim 15s linear infinite; z-index: 10; } @keyframes shad-anim { 0% {background-position: 0 0} 0% {background-position: 100% -100%} }
По материалам сайта freebiesupply.com