可爱的灯泡眨眼表情动画特效

纯css3绘制发光点亮的灯泡，可爱的灯泡表情，发光的灯泡动画特效。
下面是代哦~

:root {--unit: 1vmin;--bulb--one: hsla(210, 20%, 90%, 1);--bulb--two: hsla(210, 20%, 75%, 1);--bulb--three: hsla(210, 0%, 100%, 1);--bulb--four: hsla(210, 10%, 50%, 0.5);--cap--one: hsl(36, 22%, 9%);--cap--two: hsl(33, 74%, 28%);--cap--three: hsl(36, 69%, 37%);--cap--four: hsl(48, 100%, 94%);--cap--five: hsl(48, 100%, 90%);--connector: hsl(0, 0%, 90%);--pupil: hsl(0, 0%, 100%);--feature: hsl(0, 0%, 10%);--glow: transparent;
}html {font-size: var(--unit);
}body {margin: 0;padding: 0;cursor: pointer;background-color: hsl(205, 30%, 24%);
}body:before {--filament--left: linear-gradient(75deg, transparent 0 48%, var(--bulb--four), transparent 52% 100%) 13.25em 22em / 8em 8em;--filament--right: linear-gradient(-75deg, transparent 0 48%, var(--bulb--four), transparent 52% 100%) 18.75em 22em / 8em 8em;--filament--wire: linear-gradient(var(--bulb--four), var(--bulb--four)) 50% 23em / 7em 0.25em;--filament--body: linear-gradient(90deg, var(--bulb--two) 5%, var(--bulb--four) 10% 12%, var(--bulb--three) 15% 18% , var(--bulb--one) 20% 30%, var(--bulb--four) 30% 34%, var(--bulb--one) 34% 66%, var(--bulb--four) 66% 70%, var(--bulb--one) 70% 80%, var(--bulb--three) 82% 85%, var(--bulb--four) 88% 90%, var(--bulb--two) 95%) 50% 30em / 4em 6em;--bulb--glow: radial-gradient(var(--glow) 0 40%, transparent 60% 89%) 50% -3em / 42em 42em;--bulb--main: radial-gradient(var(--bulb--one) 0 45%, var(--bulb--two) 49%, transparent 50% 100%) 50% -3em / 42em 42em;--bulb-bottom--right: linear-gradient(128deg, var(--bulb--one) 0 36%, var(--bulb--two) 48%, transparent 50% 100%) 23.65em 28em / 8em 8em;--bulb-bottom--left: linear-gradient(-128deg, var(--bulb--one) 0 36%, var(--bulb--two) 48%, transparent 50% 100%) 8.35em 28em / 8em 8em;--bulb-bottom--center: linear-gradient(var(--bulb--one) 0 65%, var(--bulb--two) 98% 100%) 50% 28em / 9.5em 8em;--bulb-shine--central: radial-gradient(var(--bulb--three)0 50%, transparent 55% 100%) 50% 5em / 26em 26em;--bulb-shine--central-cover: radial-gradient(var(--bulb--one)0 44%, transparent 55% 100%) 50% 6em / 24em 24em;--bulb-shine--clip-top-right: linear-gradient(120deg, var(--bulb--one) 0 39%, transparent 60% 100%) 18em 8em / 8em 8em;--bulb-shine--clip-top-left: linear-gradient(-120deg, var(--bulb--one) 0 39%, transparent 60% 100%) 11em 8em / 8em 8em;--bulb-shine--clip-bottom-right: linear-gradient(60deg, var(--bulb--one) 0 39%, transparent 60% 100%) 19em 20em / 8em 8em;--bulb-shine--clip-bottom-left: linear-gradient(-60deg, var(--bulb--one) 0 39%, transparent 60% 100%) 14em 20em / 8em 8em;--bulb-shine--right: radial-gradient(circle at 0 50%, var(--bulb--three) 0% 40%, transparent 47% 100%) 19em -1em / 20em 38em;--bulb-shine--right-cover: radial-gradient(circle at 0 50%, var(--bulb--one) 0% 42%, transparent 48% 100%) 18.5em -2em / 20em 40em;--mouth: radial-gradient(circle at 50% 0, var(--feature) 0 50%, transparent 55% 100%) 50% 19em / 6em 2em;--mouth--cap: radial-gradient(circle at 50% 0, var(--bulb--one) 0 42%, transparent 43% 100%) 50% 18.75em / 6em 2em;--cap--top: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--four) 13% 22%, var(--cap--three), var(--cap--one) 32% 54%, var(--cap--three) 60%, var(--cap--four) 74% 84%, var(--cap--three), var(--cap--one)) 50% 63.5% / 11.5em 1em;--cap--highlight: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--five) 13% 84%, var(--cap--three), var(--cap--one)) 50% 64.5% / 11em 0.45em;--cap--highlight-two: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--five) 13% 84%, var(--cap--three), var(--cap--one)) 50% 72% / 9em 0.45em;--cap--top-body: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--four) 13% 22%, var(--cap--three), var(--cap--one) 32% 54%, var(--cap--three) 60%, var(--cap--four) 74% 84%, var(--cap--three), var(--cap--one)) 50% 35em / 10.5em 5em;--cap--main: linear-gradient(90deg, var(--cap--three) 5%, var(--cap--four) 13% 22%, var(--cap--three), var(--cap--one) 32% 54%, var(--cap--three) 60%, var(--cap--four) 74% 84%, var(--cap--three), var(--cap--one)) 50% 35em / 9em 13em;--cap--bayonet: linear-gradient(180deg, var(--cap--one) 5%, var(--cap--four) 10% 20%, var(--cap--two) 70% 100%) 50% 46em / 11em 0.75em;--cap--bottom: linear-gradient(var(--feature), var(--feature)) 50% 47em / 7.5em 1.5em;--cap--connector: linear-gradient(var(--connector), var(--connector)) 50% 47em / 5em 1.75em;content: '';height: 56em;width: 40em;background-color: hsla(180, 20%, 20%, 0.5);position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);/* opacity: 0.5; */background:var(--mouth--cap),var(--mouth),var(--cap--top),var(--cap--highlight),var(--cap--top-body),var(--cap--highlight-two),var(--cap--main),var(--cap--bayonet),var(--cap--bottom),var(--cap--connector),var(--filament--left),var(--filament--wire),var(--filament--right),var(--filament--body),var(--bulb-shine--clip-top-right),var(--bulb-shine--clip-top-left),var(--bulb-shine--clip-bottom-right),var(--bulb-shine--clip-bottom-left),var(--bulb-shine--central-cover),var(--bulb-shine--central),var(--bulb-shine--right-cover),var(--bulb-shine--right),var(--bulb-bottom--center),var(--bulb-bottom--left),var(--bulb-bottom--right),var(--bulb--main),var(--bulb--glow);background-repeat: no-repeat;
}body:after {--eye--left: radial-gradient(var(--feature) 0 65%, transparent 70% 100%) 0em 0em / 4em 4em;--eye--right: radial-gradient(var(--feature) 0 65%, transparent 70% 100%) 100% 0em / 4em 4em;--pupil--left: radial-gradient(var(--pupil) 0 50%, transparent 65% 100%) 0.6em 0.6em / 1em 1em;--pupil--right: radial-gradient(var(--pupil) 0 50%, transparent 65% 100%) 16.4em 0.6em / 1em 1em;content: '';height: 4em;width: 20em;background:var(--pupil--left),var(--pupil--right),var(--eye--left),var(--eye--right);background-repeat: no-repeat;top: 50%;left: 50%;position: absolute;-webkit-animation: blink 5s infinite linear;animation: blink 5s infinite linear;
}@-webkit-keyframes blink {0%, 49%, 51%, 54%, 100% {-webkit-transform: translate(-50%, -300%) scaleY(1);transform: translate(-50%, -300%) scaleY(1);}50%, 52% {-webkit-transform: translate(-50%, -300%) scaleY(0);transform: translate(-50%, -300%) scaleY(0);}
}@keyframes blink {0%, 49%, 51%, 54%, 100% {-webkit-transform: translate(-50%, -300%) scaleY(1);transform: translate(-50%, -300%) scaleY(1);}50%, 52% {-webkit-transform: translate(-50%, -300%) scaleY(0);transform: translate(-50%, -300%) scaleY(0);}
}body:active:before {--glow: hsl(45, 100%, 93%);--bulb--one: hsl(45, 100%, 96%);--bulb--two: hsl(45, 100%, 95%);--bulb--three: hsl(45, 100%, 100%);--bulb--four: hsl(45, 100%, 99%);
}

可爱的灯泡眨眼表情动画特效相关推荐

HTML+CSS css3可爱布丁蛋糕表情动画特效
style.cs代码: *:before, *:after {position: absolute;content: ""; } *:hover {z-index: 10; }bo ...
纯css3可爱的Loading加载动画特效
这个是一款可爱的loading动画,觉得好看的小伙伴一定要试试哦! html代码 <div class="loadster"><div class="l ...
情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
Unity3d之表情动画--眨眼
Unity3d之表情动画--眨眼可通过BlendShape来实现眨眼动画,效果如下: 转载请注明出处:http://www.cnblogs.com/jietian331/p/7054673.html ...
开关灯效果HTML,H5+CSS3打开关闭灯泡开关动画特效
H5+CSS3打开关闭灯泡开关动画特效 html, body { font-family: Georgia, serif; font-style: italic; font-size: 4.2vmin ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
逐帧动画与夸张表情动画
夸张表情动画的制作(1) (转之ET动画学堂) 夸张表情动画在网络上应用非常广泛,最常见的莫过于qq和msn的自定义表情, 这种表情动画是最初级的逐帧动画,使用常见的flash.easytoon ...
loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

可爱的灯泡眨眼表情动画特效

可爱的灯泡眨眼表情动画特效相关推荐

最新文章

热门文章