前端日常实战：103#视频演示如何用纯CSS制作监视眼
时间：2023-04-05 22:41:15
HTML5
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接全屏预览.https://codepen.io/comehop??e/pen/GBzLdy互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cGENVuR源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含10个元素，每个元素代表一个圆：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:lightgoldenrodyellow;}定义容器大小及其子元素的布局：.circles{width:10em;高度：10em；字体大小：30px；边框：1px黑色虚线；显示：弹性；justify-content:center;}定义每个圆的下标变量：.circlesspan:nth-child(1){--n:1;}.circlesspan:nth-child(2){--n:2;}.circlesspan:nth-child(3){--n:3;}.circlesspan:nth-child(4){--n:4;}.circlesspan:nth-child(5){--n:5;}.circlesspan:nth-child(6){--n:6;}.circlesspan:nth-child(7){--n:7;}.circlesspan:nth-child(8){--n:8;}.circlesspan:nth-child(9){--n:9;}.circlesspan:nth-child(10){--n:10;}设置每个环的大小，颜色黑白interval:.circles{position:relative;}.circlesspan{position:absolute;--diameter:calc(10em-(var(--n)-1)*1em);宽度：var(--直径)；高度：var(--直径)；border-radius:50%;}.circlesspan:nth-child(odd){background-color:darkred;}.circlesspan:nth-child(even){background-color:gold;}将三个最小的环向下移动形成凹面效果：.circlesspan:nth-child(n+8){top:calc((var(--n)-7)*1em);}让容器像注视的眼睛一样旋转：.circles{动画：旋转5s线性无限；}@keyframes旋转{to{transform:rotate(1turn);}}你完成了！
