A circle sliding up realized with CSS3 only.
A CodePen by ganshoot.
<div id="Content"> | |
<div class="position-wrapper"> | |
<div class="circle-mask"> | |
<div class="inner-circle">Sliding Up</div> | |
</div> | |
</div> | |
</div> |
A circle sliding up realized with CSS3 only.
A CodePen by ganshoot.
#Content{ | |
position: relative; | |
width: 180px; | |
height: 180px; | |
margin: 20px auto; | |
} | |
.position-wrapper{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 182px; | |
height: 182px; | |
} | |
.circle-mask{ | |
position: absolute; | |
width: 180px; | |
height: 0px; | |
left: 0; | |
top: auto; | |
bottom: 0; | |
overflow: hidden; | |
/* Animation */ | |
animation: slidein 2s 1s infinite; | |
-moz-animation: slidein 2s 1s infinite; | |
-o-animation: slidein 2s 1s infinite; | |
-webkit-animation: slidein 2s 1s infinite; | |
} | |
.inner-circle{ | |
width: 180px; | |
height: 180px; | |
background: tomato; | |
border-radius: 100%; | |
position: absolute; | |
-webkit-box-shadow: 0 0 1px #CCC; | |
box-shadow: 0 0 1px #CCC; | |
font: 16px 'helvetica neue', arial; | |
text-align: center; | |
line-height: 180px; | |
color: #FFF; | |
text-shadow: 1px 1px 1px #333; | |
} | |
/* Keyframes */ | |
@keyframes slidein{ | |
0% { height: 0; } | |
100% { height: 180px; } | |
} | |
@-webkit-keyframes slidein{ | |
0% { height: 0; } | |
100% { height: 180px; } | |
} | |
@-moz-keyframes slidein{ | |
0% { height: 0; } | |
100% { height: 180px; } | |
} | |
@-o-keyframes slidein{ | |
0% { height: 0; } | |
100% { height: 180px; } | |
} |