EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  background-color: black; 
	color: white;
	overflow: hidden;
	font-size: 30px;
}

.holder {
	width: 600px;
	height: 600px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -260px -300px;
}

.layer { 
	position: relative;
}
/* 
HEAVY TEARDROP-SPOKED ASTERISK
http://graphemica.com/%E2%9C%BD
*/
.layer > div:before {
	content: '\273D'; }
.layer > div {
	width: 600px;
	height: 600px;
	text-align: center;
	font-size: 600px;
	line-height: 600px;
	color: transparent;
	position: absolute;
	top: 0;
	left: 0;
    -webkit-animation: rotateCW 40s linear infinite;
    -moz-animation: rotateCW 40s linear infinite;
    -ms-animation: rotateCW 40s linear infinite;
    -o-animation: rotateCW 40s linear infinite;
    animation: rotateCW 40s linear infinite;

}

.layer > div.reverse {
    -webkit-animation: rotateCCW 38s linear infinite;
    -moz-animation: rotateCCW 38s linear infinite;
    -ms-animation: rotateCCW 38s linear infinite;
    -o-animation: rotateCCW 38s linear infinite;
    animation: rotateCCW 38s linear infinite;
}

.glow-red-up {
    -webkit-animation: fadeUp 2.4s linear infinite;
    -moz-animation: fadeUp 2.4s linear infinite;
    -ms-animation: fadeUp 2.4s linear infinite;
    -o-animation: fadeUp 2.4s linear infinite;
    animation: fadeUp 2.4s linear infinite;
}

.glow-red { top: -25px; }
.glow-red > div {
	text-shadow: 0 0 40px #f00; }

.glow-red > div,
.glow-orange > div {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-ms-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
}

.glow-orange { top: -15px; }
.glow-orange > div {
	text-shadow: 0 0 30px #fc0;
}

.glow-yellow { top: -8px; }
.glow-yellow > div {
	text-shadow: 0 0 40px #ff0;
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	-ms-animation-delay: .3s;
	-o-animation-delay: .3s;
	animation-delay: .3s;
}

.fill > div {
	text-shadow: 0 0 20px white;
}

/* upwards translation and fade-out */
@-webkit-keyframes fadeUp {
  from { -webkit-transform: translateY(0); opacity: 0;}
  20% { opacity: 1;}
  to { -webkit-transform: translateY(-100px); opacity: 0; }
}

@-moz-keyframes fadeUp {
  from { -moz-transform: translateY(0); opacity: 0;}
  20% { opacity: 1;}
  to { -moz-transform: translateY(-100px); opacity: 0; }
}

@-ms-keyframes fadeUp {
  from { -ms-transform: translateY(0); opacity: 0;}
  20% { opacity: 1;}
  to { -ms-transform: translateY(-100px); opacity: 0; }
}

@-o-keyframes fadeUp {
  from { -o-transform: translateY(0); opacity: 0;}
  20% { opacity: 1;}
  to { -o-transform: translateY(-100px); opacity: 0; }
}

@keyframes fadeUp {
  from { transform: translateY(0); opacity: 0;}
  20% { opacity: 1;}
  to { transform: translateY(-100px); opacity: 0; }
}

/* simple clockwise rotation */
@-webkit-keyframes rotateCW {
  from { -webkit-transform: rotateZ(0deg); }
  to { -webkit-transform: rotateZ(360deg); }
} 
@-moz-keyframes rotateCW {
  from { -moz-transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(360deg); }
} 
@-ms-keyframes rotateCW {
  from { -ms-transform: rotateZ(0deg); }
  to { -ms-transform: rotateZ(360deg); }
} 
@-o-keyframes rotateCW {
  from { -o-transform: rotateZ(0deg); }
  to { -o-transform: rotateZ(360deg); }
} 
@keyframes rotateCW {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

/* simple counter-clockwise rotation */
@-webkit-keyframes rotateCCW {
  from { -webkit-transform: rotateZ(0deg); }
  to { -webkit-transform: rotateZ(-360deg); }
} 
@-moz-keyframes rotateCCW {
  from { -moz-transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(-360deg); }
} 
@-ms-keyframes rotateCCW {
  from { -ms-transform: rotateZ(0deg); }
  to { -ms-transform: rotateZ(-360deg); }
} 
@-o-keyframes rotateCCW {
  from { -o-transform: rotateZ(0deg); }
  to { -o-transform: rotateZ(-360deg); }
} 
@keyframes rotateCCW {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(-360deg); }
}

HTML

Recommendation

Join Effecthub.com