前端日常实践：57#视频演示如何用纯CSS在黑暗中打造一双眼睛
时间：2023-04-05 20:10:35
HTML5
效果预览点击右侧“点击预览”按钮可在当前页面进行预览，点击链接全屏预览。https://codepen.io/comehop??e/pen/xzYVzO互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cRkRLsm源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个元素：
居中显示：主体{边距：0；高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.eyes{width:40em;高度：10em；font-size:10px;}画眼睛的轮廓:.eyes{position:relative;}.eyes>*{box-sizing:border-box;位置：绝对；宽度：15em；高度：10em；border:solidwhite;}.eyes.left{left:0;}.eyes.right{right:0;}画眼球：.eyes>*{border-width:05em;}.eyes.left{border-radius:50%0;}.eyes.right{border-radius:050%;}将眼睛聚集在一起：.eyes.left{transform:rotate(25deg);}.eyes.right{transform:rotate(-25deg);}定义闪烁动画：@keyframes闪烁{40%,60%{bo顺序宽度：05em；}50%{border-width:07.5em;}}最后，将动画应用到双眼：.eyes>*{animation:blink2slinearinfinite;}就大功告成了！
