Предлагаю вашему вниманию креативную подборку красивых заголовков, которые Вы можете скопировать на свой сайт. Анимация реализована на CSS3, поэтому Вам не потребуется дополнительно подключать скрипты.
Анимация для заголовка
@import "https://fonts.googleapis.com/css?family=Russo+One"; h2.funny-title{border-top:5px solid #E0DBDE;border-bottom:5px solid #E0DBDE;font-size:70px;text-align:center;margin-top:40px;margin-bottom:5px;text-transform:uppercase;font-family:'Russo One',sans-serif;font-weight:900;letter-spacing:8px} @-webkit-keyframes move-background { 0%{background-position:-300px 0} 100%{background-position:300px -300px} } @-moz-keyframes move-background { 0%{background-position:-300px 0} 100%{background-position:300px -300px} } @keyframes move-background { 0%{background-position:-300px 0} 100%{background-position:300px -300px} } .section-title{-webkit-animation-play-state:running;-moz-animation-play-state:running;animation-play-state:running;color:transparent;background:url(https://obninsksite.ru/assets/theme/images/blog/square.svg) no-repeat #ECE7EA;background-size:cover;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-animation:move-background 20s infinite linear alternate;-moz-animation:move-background 20s infinite linear alternate;animation:move-background 20s infinite linear alternate}
Заголовок с линией
.title-container{position:relative;width:300px} .title-container h2:after{content:"";position:absolute;border-bottom:2px solid red;width:100%;bottom:0}
.logo-title{margin:50px auto;text-align:center;cursor: pointer} .logo-title a{text-decoration:none;-webkit-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-moz-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-ms-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-o-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s;display:inline-block;text-align:center;text-transform:uppercase;font-size:75px;font-weight:700;font-family:'Exo 2';line-height:.8;color:#fbd62a;text-shadow:0 -1px 15px rgba(0,0,0,0.9),0 1px 0 #7f6303,0 3px 0 #846703,0 5px 0 #896b03,0 7px 0 #8e6f03,0 9px 0 #937203,0 6px 50px rgba(252,223,92,0.8)} .logo-title a:first-line{font-size:.8em} .logo-title a:hover{-webkit-transform:perspective(8em) rotateX(11deg) scale(1.2);-moz-transform:perspective(8em) rotateX(11deg) scale(1.2);-ms-transform:perspective(8em) rotateX(11deg) scale(1.2);-o-transform:perspective(8em) rotateX(11deg) scale(1.2);transform:perspective(8em) rotateX(11deg) scale(1.2);text-shadow:0 -1px 15px black,0 1px 0 #7f6303,0 2px 0 #846703,0 0 0 #896b03,0 1px 0 #8e6f03,0 2px 0 #937203,0 2px 30px rgba(252,223,92,0.6)}
Вот так вот
Вот так вот
@import "https://fonts.googleapis.com/css?family=Hammersmith+One"; svg{display:none} .svg-p{font-size:80px;-webkit-text-stroke:2px #000;font-family:FredokaOne-Regular;color:#A6540D;text-align:center;margin:0} .two{filter:url(#displacementFilter);padding:20px 40px;background-image:linear-gradient(73deg,#FFAB00 20%,#FFAB00 43%,#FFD740 43%,#FFD740 93%);border:3px solid #000;box-shadow:1px 3px 3px 1px rgba(0,0,0,0.45),inset 0 -3px 0 0 #000000,inset 2px 6px 0 0 #FFD740,inset -7px -3px 0 0 #FFAD07;border-radius:20px}
.animate-ul{position: relative;margin-top: 70px;left: 50%;display: flex;transform: translate(-50%,-50%);} .animate-ul li{list-style:none;letter-spacing:15px;font-size:5em;font-family:fantasy;color:#484848;animation:ani 1.2s linear infinite} .animate-ul li:nth-child(1){animation-delay:.2s} .animate-ul li:nth-child(2){animation-delay:.6s} .animate-ul li:nth-child(3){animation-delay:.8s} .animate-ul li:nth-child(4){animation-delay:1s} .animate-ul li:nth-child(5){animation-delay:1.4s} .animate-ul li:nth-child(6){animation-delay:1.8s} .animate-ul li:nth-child(7){animation-delay:1.12s} @keyframes ani { 0%{color:#44848;text-shadow:none} 90%{color:#44848;text-shadow:none} 100%{color:#fff900;text-shadow:0 0 7px #fff900,0 0 70px #fff123} }
HTML CSS
.style-1{font-size:6em;line-height:.7;position:relative} .style-1:after{content:attr(data-content);position:absolute;left:0;right:0;top:0;bottom:0;-webkit-text-stroke:1px #fff} .style-1:before{content:attr(data-content);position:absolute;left:0;right:0;top:0;bottom:0;-webkit-text-stroke:3px #463f60}
Комментарии ()