Tuesday, January 13, 2015

Animated text within box CSS.

<style type="text/css">

.animated-box {
border:3px solid #33b5e5;
border-radius: 30px 0;
color: #3300bb;
font-size: 25px;
font-family: verdana;
line-height:20px;
font-weight:bold;
text-align:center;
padding:50px;
width:200px;

-webkit-animation:fontbulger 1s infinite;
-moz-animation:   fontbulger 1s infinite;
-o-animation:     fontbulger 1s infinite;
animation:        fontbulger 1s infinite;
}

@-webkit-keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}
@-moz-keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}
@-o-keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}
@keyframes fontbulger {
 0%, 100% {
font-size: 15px;
 }
 50% {
font-size: 25px;
 }
}

</style>

<div class="animated-box">CSS jQuery</div>


Output :)

1)

2)

No comments:

Post a Comment