Cool Stuff (May have problem with Non-webkit Browsers)
- Rainbow !!!
- Make rainbow text!!!!!!!!!! (ONLY WORKS ON WEBKIT BROWSERS)
.rainbow {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
Pop up text
Make a cool pop up text
.pop-up{
-webkit-transition: all 0.12s ease-out;
}
.pop-up:hover {
position: relative; top: -3px; left: -3px;
text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
-webkit-transition: all 0.12s ease-out;
}
Animations
Like this !
.anime{
-webkit-transition: all 3s linear;
}
.anime:hover{
-webkit-transform: translate(700px,0);
}
*also can do with rotate(degree) ;transform(x,y) all properties such as color,width,height,size,scale();
Further Animation
setting key frames
.anime2{
width: auto;
-webkit-transition-property: font-size,color,-webkit-transform;
-webkit-transition-duration: 1s,1s,1s;
-webkit-transition-timing-function: ease,ease-out,ease;
-webkit-transition-delay: 0s,1s,1s;
}
.anime2:hover{
font-size: 50px;
color: purple;
-webkit-transform: rotate(360deg);
}
*Increase in size => turns purple => rotate
Spinning Box
@keyframes color-change{
0% {
background-color: red;
left: 0px;
-webkit-transform: rotate(0deg) scale(1);
}
50% {
background-color: blue;
left: 80%;
-webkit-transform: rotate(180deg) scale(2);
}
100%{
background-color:red;
left: 0px;
-webkit-transform: rotate(360deg) scale(1);
}
}
.spinning-box {
display:block;
height: 100px;
width: 100px;
top: 10px ;left : 10px;
position:relative;
animation-name: color-change;
animation-duration: 2s;
animation-iteration-count: infinite;
}
