css - How to create a shiny effect on an image (logo) -
i found solutions expecting, on div elements. tried apply images no success. there idea how add shiny effect on png image? example: http://jsfiddle.net/nqqc7/289/
because img
tag doesn't pseudo elements, you'll need use wrapper element , absolute
ly position img
within it. this demo shows, shown below:
.wrap { display: inline-block; height: 200px; width: 200px; position: relative; overflow: hidden; } .wrap img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .wrap:before { content: ""; z-index: 10; position: absolute; height: 200%; width: 200%; top: -120%; left: -120%; background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%); transition: 2s; transform: rotate(-45deg); animation: shine 6s infinite forwards; } @keyframes shine { 0% { top: -120%; left: -120%; } 20% { left: 100%; top: 100%; } 40% { left: 100%; top: 100%; } 100% { left: 100%; top: 100%; } }
<div class="wrap"> <img src="http://placehold.it/200/200" /> <div>
Comments
Post a Comment