html - 如何创建淡入/淡出图像动画
问题描述
我想调整下面正在运行的现有代码,以支持不止两个图像。
HTML:
<div id="cf">
<img class="bottom" src="<?php bloginfo('template_directory') ?>/assets/img/image1" />
<img class="top" src="<?php bloginfo('template_directory') ?>/assets/img/image2" />
</div>
CSS:
#cf {
position:relative;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 4s ease-in-out;
-moz-transition: opacity 4s ease-in-out;
-o-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
我知道它很接近,但我不确定如何编写它,因此它将支持更多图像。想法或建议?
解决方案
设置一个包含动画的类。将此类用于所需的图像。
例子
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
opacity: 0;
animation-name: fadeOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
<img class="fadeOut" src="http://via.placeholder.com/40x40">
<img class="fadeOut" src="http://via.placeholder.com/40x40">
<img class="fadeOut" src="http://via.placeholder.com/40x40">
推荐阅读
- python - 使用 Flask 创建单引擎 sqlalchemy 的最佳方法
- javascript - Node.js + MySQL:双“?” 占位符
- reactjs - React hooks 参考值比较
- visual-studio-code - VS 代码。键入时禁用显示错误
- sh - SIGTERM 不会终止脚本
- javascript - 导航栏可以在我的电脑上使用,但不能在互联网上使用
- sas - SAS 中的百分比格式
- java - 如何将 Edittext 中的文本转换为 Toast?
- hadoop - HBase 拆分命令引发不可拆分错误
- android - 为什么 firebaseuser.getdisplay name 即使它不包含名称也会返回一些东西?