我正在尝试创建一个等待/倒计时屏幕,显示眼睛和眼睑,以及具有虹膜效果的眼球。鉴于我们中的许多人毫无意义地花时间盯着这样的微调器,我试图达到的效果是“眼睛”微调器回头看着观察者并眨眼。
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 秒只是为了说明,所以它会持续工作很长时间 - 在实际应用程序中,等待时间可能是相当少。
虽然这个效果正在朝着正确的方向发展,但它仍然缺少眨眼效果。我怀疑这在正确的“盒子阴影”操作和简单动画的帮助下很容易实现。然而,在这里我达到了我兼职 CSS 技能的极限。如果有人能提出改进建议以完成此实现,我将不胜感激。
最佳答案
我会以不同的方式做这件事,并考虑闪烁效果的旋转。诀窍是用两个元素(眼睑)创建眼睛,使其能够眨眼。
这里是只有眨眼动画的代码:
.eye {
width: 250px;
height: 80px;
margin: 50px;
display:inline-block;
perspective: 200px;
background:
radial-gradient(circle 100px at 50% 250%,#f1c27d 99% ,transparent 100%) top/100% 50%,
radial-gradient(circle 100px at 50% -150%,#f1c27d 99% ,transparent 100%) bottom/100% 50%;
background-repeat:no-repeat
}
.eye>div {
height: 50%;
position:relative;
overflow:hidden;
transform-origin:bottom;
animation:b1 0.8s infinite ease-out alternate;
}
.eye>div:last-child {
transform-origin:top;
animation-name:b2;
}
.eye>div:before {
content: "";
position: absolute;
top:0;
left:10%;
right:10%;
padding-top:80%;
border-radius:50%;
background:#fff;
box-shadow:
-2px 0 0 3px inset #f1c27d,
inset -5px 5px 2px 4px black;
}
.eye>div:last-child:before {
bottom:0;
top:auto;
box-shadow:
-2px 0 0 3px inset #f1c27d,
inset -6px -4px 2px 4px black;
}
body {
background:#000;
}
@keyframes b1{
to { transform:rotateX(-88deg);}
}
@keyframes b2{
to {transform:rotateX(88deg);}
}
<div class="eye">
<div></div>
<div></div>
</div>
这是更真实的全眼眨眼:
var ticks = 300,ticker;
setTimeout(function() { ticker = setInterval(changeTick,1600);},500);
function changeTick()
{
document.querySelector('.eye span').setAttribute('data-text', --ticks);
if (0 === ticks) clearInterval(ticker);
}
.eye {
width: 250px;
height: 80px;
margin: 50px;
display:inline-block;
perspective: 200px;
background:
radial-gradient(circle 100px at 50% 250%,#f1c27d 99% ,transparent 100%) top/100% 50%,
radial-gradient(circle 100px at 50% -150%,#f1c27d 99% ,transparent 100%) bottom/100% 50%;
background-repeat:no-repeat;
transform-style:preserve-3d;
position:relative;
}
.eye>div {
height: 50%;
position:relative;
overflow:hidden;
transform-origin:bottom;
z-index:1;
animation:b1 0.8s infinite ease-out alternate;
}
.eye>div:last-child {
transform-origin:top;
animation:none;
}
.eye>div:before {
content: "";
position: absolute;
top:0;
left:10%;
right:10%;
padding-top:80%;
border-radius:50%;
background:#fff;
box-shadow:
-2px 0 0 3px inset #f1c27d,
inset -5px 5px 2px 4px black;
animation:inherit;
animation-name:color;
}
.eye>div:last-child:before {
bottom:0;
top:auto;
box-shadow:
-2px 0 0 3px inset #f1c27d,
inset -6px -4px 2px 4px black;
}
.eye > span {
position:absolute;
width:45px;
height:45px;
bottom:18px;
left:50%;
transform:translateX(-50%) translateZ(55px);
overflow:hidden;
border-radius:20% 20% 0 0;
z-index:2;
animation:b2 0.8s infinite ease-out alternate;
}
.eye > span:before {
position:absolute;
left:0;
bottom:0;
height:45px;
width:100%;
content:attr(data-text);
border-radius:50%;
background:#000;
color:#fff;
text-align:center;
line-height:45px;
}
body {
background:#000;
}
@keyframes b1{
to {
transform:rotateX(-170deg);
}
}
@keyframes b2{
50% {
height:20px;
}
60%,100% {
height:0px;
}
}
@keyframes color{
0%,40% {
background:#fff;
box-shadow:
-2px 0 0 3px inset #f1c27d,
inset -5px 5px 2px 4px black;
}
40.1%,100% {
background:#f1c27d;
box-shadow:none;
}
}
<div class="eye">
<div></div>
<span data-text="300"></span>
<div></div>
</div>
关于css - 创建 CSS 眨眼眼皮效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56804355/