| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="theme.css"> | |
| </head> | |
| <body> | |
| <div> | |
| <div class="img-circular" id ="inner"></div> | |
| </div> | |
| </body> | |
| </html> |
with help from http://zurb.com/article/221/css3-animation-will-rock-your-world and http://stackoverflow.com/questions/4910963/how-to-create-a-pulse-effect-using-webkit-animation-outward-rings
only works on chrome for some reason
A Pen by karan harsh wardhan on CodePen.
| .img-circular{ | |
| width: 200px; | |
| height: 200px; | |
| background-image: url('http://placekitten.com/200/200') ; | |
| background-size: cover; | |
| -webkit-border-radius: 100px; | |
| -moz-border-radius: 100px; | |
| border-radius:100px; | |
| -webkit-background-clip: padding-box; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-animation: fadein 5s ; | |
| -webkit-animation-iteration-count: 1; | |
| } | |
| #inner{ | |
| margin: 0 auto; | |
| } | |
| @-webkit-keyframes fadein { | |
| 0% {-webkit-transform: scale(1.0, 1.0); opacity: 0.0;} | |
| 100% {-webkit-transform: scale(1.0, 1.0); opacity: 1.0;} | |
| } | |