I'm trying to do this shine effect operate automatically (without a: hover), every 5 seconds.
http://jsfiddle.net/AntonTrollback/nqQc7/
.icon:after {
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.icon:hover:after {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
How To Create a CSS Glow Effect. The CSS glowing text can be created by using the text-shadow property. This property allows you to add different shadows to your text. You can also place your text in an element and then apply the shadow effect to it by using the box-shadow property with some animations.
The key is to use the box-shadow property of CSS to glow the image when user put cursor on image.
You can create CSS animation like this DEMO
@keyframes shine{
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With