我正在尝试创建一个带有倒计时数字的等待屏幕，显示有眼睑的眼睛和有虹膜效果的眼球。
鉴于我们中的许多人浪费时间看这些лоадеры，我想创建一个加载器效果，其中旋转的“眼睛”看着查看器并眨眼。
document.getElementById('waitDia').showModal();
var ticks = 300,
ticker = setInterval(changeTick,1000);
function changeTick()
{
document.getElementById('spnTick').innerText = --ticks;
if (0 === ticks) clearInterval(ticker);
}#waitDia
{
position:absolute;
left:0 !important;
top:0 !important;
width:100vw !important;
height:100vh !important;
padding:0;
min-width:100vw;
min-height:100vh;
background-color:transparent !important;
}
#waitDia::backdrop{background-color:rgba(127,127,127,0.2);}
#spnTick
{
position:absolute;
display:inline-block;
width:100%;
left:0;
top:0;
}
#waitbox
{
left:0 !important;
top:0 !important;
width:100vw !important;
height:100vh !important;
position:absolute;
overflow:hidden;
}
#eyeball
{
position:relative;
top:-10vh;
left:-6px;
width:calc(24vh + 12px);
height:calc(24vh + 12px);
box-sizing:border-box;
background:rgba(0,128,128,0.5);
border-radius:100%;
border:1px solid transparent;
box-shadow:inset 0 0 18px 2px blue;
z-index:99999998;
}
#waitsecs
{
position:absolute;
left:calc(50vw - 12vh);
top:46vh;
width:24vh;
height:24vh;
font-size:8vh;
text-align:center;
display:block;
}
#waitEye
{
position:absolute;
top:27vh;
left:calc(50vw - 23vh);
width: 46vh;
height: 46vh;
background-color: rgba(255,255,255,.9);
border-radius: 100% 0px;
transform: rotate(45deg);
mix-blend-mode:overlay;
z-index:199999999;
box-shadow:0 -0.5vh 0 2px #f1c27d,inset 0 6px 4px 4px black;
}
body,html
{
background:black;
font-family:arial;
}<dialog id='waitDia' class='waitdia'>
<div id='waitbox'>
<div id='waitsecs'><span id='spnTick'>300</span><div id='eyeball'></div></div>
<div id='waitEye'></div>
</div>
</dialog>到目前为止我已经能够实现的如下所示 - 我在这里将代码设置为 300 秒，仅作为说明，以使其长时间运行 - 在实际应用程序中，等待时间可能会显着减少。
虽然这种效果正朝着正确的方向发展，但它仍然缺乏眨眼效果。我怀疑这很容易通过正确的操作box-shadow和简单的动画来实现。
我非常感谢任何可以提出改进建议以完成此实施的人。
由 @DroidOS创建一个 CSS 闪烁的眼睑效果问题的松散翻译。
根据时间在贝塞尔曲线中移动 2 个锚点：
PS：平滑函数取自这里：https ://gist.github.com/gre/1650294
微笑版
SVG SMIL 解决方案
<path>从上到下的过渡改变“d”属性来实现的。通过重复位置来实现眼睑上下位置的停顿
了解有关暂停动画的更多信息 -如何在 SVG 中实现动画
туда и обратно无计数器解决方案
倒计时选项
Связанный вопрос: Анимация svg глаз кролика с помощью атрибутов path “d” и “keyTimes”
我会以不同的方式做，并考虑旋转以获得微光效果。诀窍是用两个元素（眼睑）创建一只眼睛，以便它们可以眨眼。
这是只有闪烁动画的代码：
这是整个眼睛的眼睑更逼真的眨眼：
@Temani Afif对创建 CSS 闪烁眼睑效果的 松散翻译。
Размер зрачка зависит от расстояния до мышки.
Глаз поворачивается в направлении указателя.
Процент загрузки выражается размером сектора радужной оболочки.