Created
April 17, 2013 00:08
-
-
Save michaelmusgrove/5400716 to your computer and use it in GitHub Desktop.
CSS only Intro for coming soon or informational page. Lots of cool things you can do with this.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(http://fonts.googleapis.com/css?family=Gravitas+One); | |
/*--CSS Curtain Effect--*/ | |
body { | |
background: #5b8083 url(http://fontypython.com/wp-content/uploads/2013/04/red_texture2.jpg) repeat top left; | |
font-family: 'Gravitas One', cursive; | |
} | |
h1.main,p.demos { | |
-webkit-animation-delay: 18s; | |
-moz-animation-delay: 18s; | |
-ms-animation-delay: 18s; | |
animation-delay: 18s; | |
} | |
.sp-container { | |
position: fixed; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
z-index: 0; | |
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); | |
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); | |
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); | |
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); | |
} | |
.sp-content { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: 0px; | |
top: 0px; | |
z-index: 1000; | |
} | |
.sp-container h2 { | |
text-transform:none; | |
position: absolute; | |
top: 50%; | |
line-height: 100px; | |
height: 100px; | |
margin-top: -50px; | |
font-size: 100px; | |
width: 100%; | |
text-align: center; | |
color: transparent; | |
-webkit-animation: blurFadeInOut 3s ease-in backwards; | |
-moz-animation: blurFadeInOut 3s ease-in backwards; | |
-ms-animation: blurFadeInOut 3s ease-in backwards; | |
animation: blurFadeInOut 3s ease-in backwards; | |
} | |
.sp-container h2.frame-1 { | |
-webkit-animation-delay: 0s; | |
-moz-animation-delay: 0s; | |
-ms-animation-delay: 0s; | |
animation-delay: 0s; | |
} | |
.sp-container h2.frame-2 { | |
-webkit-animation-delay: 3s; | |
-moz-animation-delay: 3s; | |
-ms-animation-delay: 3s; | |
animation-delay: 3s; | |
} | |
.sp-container h2.frame-3 { | |
font-size: 150px; | |
-webkit-animation-delay: 6s; | |
-moz-animation-delay: 6s; | |
-ms-animation-delay: 6s; | |
animation-delay: 6s; | |
} | |
.sp-container h2.frame-4 { | |
-webkit-animation-delay: 9s; | |
-moz-animation-delay: 9s; | |
-ms-animation-delay: 9s; | |
animation-delay: 9s; | |
} | |
.sp-container h2.frame-5 { | |
-webkit-animation: none; | |
-moz-animation: none; | |
-ms-animation: none; | |
animation: none; | |
color: transparent; | |
font-size: 50px; | |
text-shadow: 0px 0px 1px #fff; | |
} | |
.sp-container h2.frame-5 span { | |
-webkit-animation: blurFadeIn 3s ease-in 11s backwards; | |
-moz-animation: blurFadeIn 1s ease-in 11s backwards; | |
-ms-animation: blurFadeIn 3s ease-in 11s backwards; | |
animation: blurFadeIn 3s ease-in 11s backwards; | |
color: transparent; | |
text-shadow: 0px 0px 1px #fff; | |
} | |
.sp-container h2.frame-5 span:nth-child(2) { | |
-webkit-animation-delay: 12s; | |
-moz-animation-delay: 12s; | |
-ms-animation-delay: 12s; | |
animation-delay: 12s; | |
} | |
.sp-container h2.frame-5 span:nth-child(3) { | |
-webkit-animation-delay: 13s; | |
-moz-animation-delay: 13s; | |
-ms-animation-delay: 13s; | |
animation-delay: 13s; | |
} | |
.sp-logo { | |
position: absolute; | |
width: 293px; | |
height: 155px; | |
left: 56%; | |
top: 45%; | |
margin: -70px 0 0 -165px; | |
background: transparent url(http://fontypython.com/wp-content/uploads/2013/04/WDPmodernNo20-191x84.png) no-repeat top left; | |
-webkit-animation: blurFadeIn 3.6s ease-in 14s backwards; | |
-moz-animation: blurFadeIn 3.6s ease-in 14s backwards; | |
-ms-animation: blurFadeIn 3.6s ease-in 14s backwards; | |
animation: blurFadeIn 3.6s ease-in 14s backwards; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; | |
filter: alpha(opacity=00); | |
} | |
.sp-circle-link { | |
position: absolute; | |
left: 50%; | |
bottom: 100px; | |
margin-left: -50px; | |
text-align: center; | |
line-height: 150px; | |
width: 150px; | |
height: 150px; | |
background: #fff; | |
color: #5b8083; | |
font-size: 25px; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
-webkit-animation: fadeInRotate 1s linear 18s backwards; | |
-moz-animation: fadeInRotate 1s linear 18s backwards; | |
-ms-animation: fadeInRotate 1s linear 16s backwards; | |
animation: fadeInRotate 1s linear 18s backwards; | |
-webkit-transform: scale(1) rotate(0deg); | |
-moz-transform: scale(1) rotate(0deg); | |
-o-transform: scale(1) rotate(0deg); | |
-ms-transform: scale(1) rotate(0deg); | |
transform: scale(1) rotate(0deg); | |
} | |
.sp-circle-link:hover { | |
background: #5b8083; | |
color: #fff; | |
} | |
/**/ | |
@-webkit-keyframes blurFadeInOut{ | |
0%{ | |
opacity: 0; | |
text-shadow: 0px 0px 40px #fff; | |
-webkit-transform: scale(1.3); | |
} | |
20%,75%{ | |
opacity: 1; | |
text-shadow: 0px 0px 1px #fff; | |
-webkit-transform: scale(1); | |
} | |
100%{ | |
opacity: 0; | |
text-shadow: 0px 0px 50px #fff; | |
-webkit-transform: scale(0); | |
} | |
} | |
@-webkit-keyframes blurFadeIn{ | |
0%{ | |
opacity: 0; | |
text-shadow: 0px 0px 40px #fff; | |
-webkit-transform: scale(1.3); | |
} | |
50%{ | |
opacity: 0.5; | |
text-shadow: 0px 0px 10px #fff; | |
-webkit-transform: scale(1.1); | |
} | |
100%{ | |
opacity: 1; | |
text-shadow: 0px 0px 1px #fff; | |
-webkit-transform: scale(1); | |
} | |
} | |
@-webkit-keyframes fadeInBack{ | |
0%{ | |
opacity: 0; | |
-webkit-transform: scale(0); | |
} | |
50%{ | |
opacity: 0.4; | |
-webkit-transform: scale(2); | |
} | |
100%{ | |
opacity: 0.2; | |
-webkit-transform: scale(5); | |
} | |
} | |
@-webkit-keyframes fadeInRotate{ | |
0%{ | |
opacity: 0; | |
-webkit-transform: scale(0) rotate(360deg); | |
} | |
100%{ | |
opacity: 1; | |
-webkit-transform: scale(1) rotate(0deg); | |
} | |
} | |
/**/ | |
@-moz-keyframes blurFadeInOut{ | |
0%{ | |
opacity: 0; | |
text-shadow: 0px 0px 40px #fff; | |
-moz-transform: scale(1.3); | |
} | |
20%,75%{ | |
opacity: 1; | |
text-shadow: 0px 0px 1px #fff; | |
-moz-transform: scale(1); | |
} | |
100%{ | |
opacity: 0; | |
text-shadow: 0px 0px 50px #fff; | |
-moz-transform: scale(0); | |
} | |
} | |
@-moz-keyframes blurFadeIn{ | |
0%{ | |
opacity: 0; | |
text-shadow: 0px 0px 40px #fff; | |
-moz-transform: scale(1.3); | |
} | |
100%{ | |
opacity: 1; | |
text-shadow: 0px 0px 1px #fff; | |
-moz-transform: scale(1); | |
} | |
} | |
@-moz-keyframes fadeInBack{ | |
0%{ | |
opacity: 0; | |
-moz-transform: scale(0); | |
} | |
50%{ | |
opacity: 0.4; | |
-moz-transform: scale(2); | |
} | |
100%{ | |
opacity: 0.2; | |
-moz-transform: scale(5); | |
} | |
} | |
@-moz-keyframes fadeInRotate{ | |
0%{ | |
opacity: 0; | |
-moz-transform: scale(0) rotate(360deg); | |
} | |
100%{ | |
opacity: 1; | |
-moz-transform: scale(1) rotate(0deg); | |
} | |
} | |
/**/ | |
@keyframes blurFadeInOut{ | |
0%{ | |
opacity: 0; | |
text-shadow: 0px 0px 40px #fff; | |
transform: scale(1.3); | |
} | |
20%,75%{ | |
opacity: 1; | |
text-shadow: 0px 0px 1px #fff; | |
transform: scale(1); | |
} | |
100%{ | |
opacity: 0; | |
text-shadow: 0px 0px 50px #fff; | |
transform: scale(0); | |
} | |
} | |
@keyframes blurFadeIn{ | |
0%{ | |
opacity: 0; | |
text-shadow: 0px 0px 40px #fff; | |
transform: scale(1.3); | |
} | |
50%{ | |
opacity: 0.5; | |
text-shadow: 0px 0px 10px #fff; | |
transform: scale(1.1); | |
} | |
100%{ | |
opacity: 1; | |
text-shadow: 0px 0px 1px #fff; | |
transform: scale(1); | |
} | |
} | |
@keyframes fadeInBack{ | |
0%{ | |
opacity: 0; | |
transform: scale(0); | |
} | |
50%{ | |
opacity: 0.4; | |
transform: scale(2); | |
} | |
100%{ | |
opacity: 0.2; | |
transform: scale(5); | |
} | |
} | |
@keyframes fadeInRotate{ | |
0%{ | |
opacity: 0; | |
transform: scale(0) rotate(360deg); | |
} | |
100%{ | |
opacity: 1; | |
transform: scale(1) rotate(0deg); | |
} | |
} | |
/*--IE CSS--*/ | |
.sp-container h2.frame-5 span { | |
color: #fff; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="header"> | |
<div class="clr"></div> | |
</div> | |
<div class="sp-container"> | |
<div class="sp-content"> | |
<div class="sp-logo"></div> | |
<h2 class="frame-1">To enhance your brand</h2> | |
<h2 class="frame-2">We bring you</h2> | |
<h2 class="frame-3">web design POP</h2> | |
<h2 class="frame-4">With a new look</h2> | |
<h2 class="frame-5"><span style="text-transform:none;">webdesign</span><span style="text-transform:none;">POP.com</span></h2> | |
<a class="sp-circle-link" href="http://www.twitter.com/#!/webdesignpop">Follow</a> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment