Css 交换图像并制作闪烁效果

Question

我正在尝试使用 2 个图像创建闪烁效果。

我有2张和一个人的照片，一张是睁着眼睛的，一张是闭着眼睛的。如何制作闪烁效果？

我希望让它尽可能真实，试着快速眨眼，然后睁眼 3-5 秒，然后再眨眼 1 秒。

找到一个几乎是我需要但还不是很需要的例子

非常感谢您的帮助

Answer 1

.imageswap {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
.imageswap img {
    position:absolute;
    left:0;
    top: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  object-fit: contain;
    width: 100%;
    height: 100%;
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
img.openeyeimg {
    -webkit-animation: blink 5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 5s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 5s;
    -o-animation-iteration-count: infinite;
}

<div class="imageswap">
  <!-- NOTE: both images should be have same dimension, look&feel -->
  <img src="https://i.stack.imgur.com/yqWK7.jpg" class="closeeyeimg">
  <img src="https://i.stack.imgur.com/NgW24.jpg" class="openeyeimg">
</div>

Css 交换图像并制作闪烁效果

Css swapping images and making a blink effect

css

sass