我試圖通過使用 2 張影像來創建眨眼效果。
我有兩張和一個人的照片，一張是睜著眼睛的，另一張是閉著眼睛的。我怎樣才能做出閃爍的效果？
我希望讓它盡可能真實，嘗試快速眨眼，然后睜開眼睛 3-5 秒，然后在 1 秒內眨眼。
找到了一個幾乎是我需要但還不夠的例子
真的很感激一些幫助
uj5u.com熱心網友回復：
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/397373.html
上一篇：有沒有辦法在加載時將此.map方法中的第一個元素設定為默認類？
下一篇：背景影像通過滾動增加大小