Cara Sederhana Membuat Kalimat Pembuka Pada Halaman Beranda Blog.
/* Design Body
Oleh: Devy Indriyani
Web URL: http://sahabatblogger77.blogspot.com
CSS input: type CSS {link-sb77,(sahabat blogger 77)}
*/
body {background: repeat right left;}
.sb77-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));}
.sb77-content {
position: absolute;
width: 100%;height: 100%;
left: 0px;top: 0px;
z-index: 1000;}
.sb77-container h2 {
position: absolute;
top: 50%;width: 100%;
line-height: 60px;
height: 100px;
margin-top: -50px;
font-size: 100px;
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;}
.sb77-container h2.frame-1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;}
.sb77-container h2.frame-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;}
.sb77-container h2.frame-3 {
font-size: 75px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;}
.sb77-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;}
.sb77-container h2.frame-5 {
font-size: 50px;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;}
.sb77-container h2.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;}
.sb77-container h2.frame-5 span:nth-child(2) {
color: #530118;
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;}
.sb77-container h2.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;}
.sb77-joinweb {
position: absolute;
width: 282px;height: 273px;
left: 50%;top: 50%;
margin: -137px 0 0 -141px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSq5jHuO2BWcE9Rxj8cDOXWHoeRwIoB9-An8-IN_-08mcSY7bpyZAJXC-bUVKCRCp5D3Xy4KEXyzY9RST-_8Md7Brf8TjjeV2gWlIwz6kLpTdI651tNPE8P4L_9Y8aQIzGRWBocX_7D4k/s1600/12.jpg);
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);}
.sb77-link {
position: absolute;
left: 50%;bottom: 70px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 95px;height: 95px;
padding: 3px;background: #fff;
color: #3f1616;font-size: 20px;
border:8px solid rgba(225,225,225,.5);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s 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);}
.sb77-link:hover {background: #080;color: #fff;}CSS media keyframes
@-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);}}