<div class="container">
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>Really</span>
<span>would you like</span>
<span>to</span>
<div class="rw-words">
<span>Discover</span>
<span>make</span>
<span>Looking </span>
<span>enjoy</span>
<span>create</span>
<span>invent</span>
</div>
<span>today?</span>
</h2>
</section>
</div>
<div class="social">
<a href="https://www.udemy.com/learn-psd-to-responsive-parallax-html-5-css-3-web-design/?couponCode=PSD_HTML" target="_blank">Click Here for Free PSD TO HTML course 2019</a>
</div>
body{
background: url(https://i.postimg.cc/B6hYRmmd/autumn-1657662-960-720.jpg) no-repeat top right;
background-attachment: fixed;
background-size: cover;
}
.rw-wrapper{
width: 80%;
position: relative;
margin: 0px auto 0 auto;
padding: 10px;
}
.rw-sentence{
margin: 0;
}
.rw-sentence span{
text-align: center;
color: rgba(255,255,255,1);
font-family: 'Roboto Condensed', sans-serif;
white-space: nowrap;
text-shadow: 2px 5px 10px rgba(0,0,0,0.1);
}
.rw-sentence > span{
position: absolute;
}
.rw-sentence > span:first-child{
top: 0px;
left: 140px;
font-size: 700%;
color: rgba(187,177,168,0.6);
}
.rw-sentence > span:nth-child(2){
top: 160px;
left: 300px;
font-size: 315%;
color: rgba(191,218,206, 0.7);
}
.rw-sentence > span:nth-child(3){
top: 185px;
left: 65px;
font-size: 600%;
color: rgba(255,255,255,0.8);
}
.rw-sentence > span:last-child{
top: 435px;
left: 550px;
font-size: 200%;
color: rgba(237,234,168, 0.9);
text-transform: uppercase;
}
.rw-words{
position: absolute;
left: 220px;
top: 220px;
height: 80px;
width: 400px;
-webkit-perspective: 800px;
perspective: 800px;
text-transform: uppercase;
font-family: impact;
}
.rw-words span{
position: absolute;
font-size: 800%;
color: transparent;
text-shadow: 0px 0px 80px rgba(255,255,255,1);
opacity: 0;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
@keyframes rotateWord {
0% {
opacity: 0;
animation-timing-function: ease-in;
transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
5% {
opacity: 1;
animation-timing-function: ease-out;
-webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg); transform: translateY(0px) translateZ(0px) rotateY(0deg);
}
6% {
text-shadow: 0px 0px 0px rgba(255,255,255,1);
color: #fff; }
17% {
opacity: 1;
text-shadow: 0px 0px 0px rgba(255,255,255,1);
color: #fff; }
20% { opacity: 0; }
100% { opacity: 0; }
}
.no-cssanimations .rw-words span:first-child{
opacity: 1;
color: #fff;
text-shadow: none;
}
.social
{
position:fixed;
bottom:10px;
right:10px;
background:#fff;
font-family:verdana;
padding:5px;
border-radius:5px;
animation:new .5s linear infinite;
margin-top:-50px;
}
.social a
{
text-decoration:none;
color:black;
font-weight:bold;
}
@keyframes new
{
0%
{
transform:scaleX(1);
}
50%
{
transform:scaleX(.95);
}
100%
{
transform:scaleX(1);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.