如何用纯CSS创作一双黑暗中的眼睛

按下右侧的“点击预览”按钮可以在当前页面预览&＃xff0c;点击链接可以全屏预览。

https://codepen.io/comehope/pen/xzYVzO

此视频是可以交互的&＃xff0c;你可以随时暂停视频&＃xff0c;编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cRkRLsm

每日前端实战系列的全部源代码请从 github 下载&＃xff1a;

https://github.com/comehope/front-end-daily-challenges

定义 dom&＃xff0c;容器中包含 2 个元素&＃xff1a;

居中显示&＃xff1a;

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black;}

定义容器尺寸&＃xff1a;

.eyes {width: 40em;height: 10em;font-size: 10px;}

画出眼睛的轮廓&＃xff1a;

.eyes {position: relative;}.eyes > * {box-sizing: border-box;position: absolute;width: 15em;height: 10em;border: solid white;}.eyes .left {left: 0;}.eyes .right {right: 0;}

画出眼球&＃xff1a;

.eyes > * {border-width: 0 5em;}.eyes .left {border-radius: 50% 0;}.eyes .right {border-radius: 0 50%;}

使双眼向内聚拢&＃xff1a;

.eyes .left {transform: rotate(25deg);}.eyes .right {transform: rotate(-25deg);}

定义眨眼的动画&＃xff1a;

&＃64;keyframes blink {40%, 60% {border-width: 0 5em;}50% {border-width: 0 7.5em;}}

最后&＃xff0c;把动画效果应用到两只眼睛上&＃xff1a;

.eyes > * {animation: blink 2s linear infinite;}

大功告成&＃xff01;

原文地址&＃xff1a;https://segmentfault.com/a/1190000015327725