<div class="lightbulb">
<div class="light"></div>
<div><img src="https://i.imgur.com/i5AWSel.png" /></div>
</div>
body {
background:url("https://i.imgur.com/PPooXlQ.jpg");
background-size:cover;
}
.lightbulb {
margin-top:100px;
position:relative;
left:35%;
}
.lightbulb img {
width:400px;
}
.light {
border:1px solid red;
margin:0 auto;
text-align:center;
position:absolute;
width:800px;
height:800px;
margin-top:-200px;
margin-left:-200px;
left:0;
top:0;
-webkit-animation-name: flicker;
animation-name: flicker;
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.light {
position:absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.3+0,0+50 */
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 );
}
@keyframes flicker {
from {
opacity: 0.5;
}
4% {
opacity: 0.7;
}
8% {
opacity: 0.45;
}
12% {
opacity: 0.65;
}
16% {
opacity: 0.30;
}
20% {
opacity: 0.5;
}
24% {
opacity: 0.6;
}
28% {
opacity: 0.25;
}
32% {
opacity: 0.30;
}
36% {
opacity: 0.55;
}
40% {
opacity: 0.4;
}
44% {
opacity: 0.6;
}
48% {
opacity: 0.35;
}
52% {
opacity: 0.20;
}
56% {
opacity: 0.70;
}
60% {
opacity: 0.5;
}
64% {
opacity: 0.65;
}
68% {
opacity: .35;
}
72% {
opacity: 0.5;
}
76% {
opacity: 0.4;
}
80% {
opacity: .65;
}
84% {
opacity: 0.40;
}
88% {
opacity: 0.35;
}
92% {
opacity: 0.6;
}
96% {
opacity: 0.3;
}
to {
opacity: 0.5;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.