"Text Animation"
Bootstrap 3.3.0 Snippet by mail2sundarg

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <p aria-label="CodePen"> <span data-text="S">S</span><span data-text="U">U</span><span data-text="N">N</span><span data-text="D">D</span><span data-text="A">A</span><span data-text="R">R</span> </p>
p { color: #fff; font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif; font-size: 1em; font-weight: 700; } p span { display: inline-block; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 500; perspective: 500; -webkit-font-smoothing: antialiased; } p span::before, p span::after { display: none; position: absolute; top: 0; left: -1px; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: all ease-out 0.3s; transition: all ease-out 0.3s; content: attr(data-text); } p span::before { z-index: 1; color: rgba(0,0,0,0.2); -webkit-transform: scale(1.1, 1) skew(0deg, 20deg); transform: scale(1.1, 1) skew(0deg, 20deg); } p span::after { z-index: 2; color: #684da3; text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8); -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); } p span:hover::before { -webkit-transform: scale(1.1, 1) skew(0deg, 5deg); transform: scale(1.1, 1) skew(0deg, 5deg); } p span:hover::after { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } p span + span { margin-left: 0.3em; } @media (min-width: 20em) { p { font-size: 2em; } p span::before, p span::after { display: block; } } @media (min-width: 30em) { p { font-size: 3em; } } @media (min-width: 40em) { p { font-size: 5em; } } @media (min-width: 60em) { p { font-size: 8em; } } html, body { margin: 0; padding: 0; height: 100%; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #684da3; }

Related: See More


Questions / Comments: