第一期: 我一直在努力做到这一点,但没有任何效果。就像加载页面一样,我想要一个图像缩放和淡化并坐在那里。图片也是一个链接。
到目前为止我没有任何动画的代码是
html---
<a href="index.html">
<img src="images/insandoutslogo.jpg" alt="" class="insandoutslogoimg" />
<p1> Ins and Outs </p1>
</a>
CSS---
.insandoutslogoimg
{
width: 210px;
height: 210px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -112.5px;
margin-left: -112.5px;
}
谢谢堆!
最佳答案
这个问题很难理解。但也许你正在寻找这样的东西:
.insandoutslogoimg {
width: 210px;
height: 210px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -112.5px;
margin-left: -112.5px;
animation: fadeInDown 2s ease;
}
@keyframes fadeInDown {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
您还需要 browser prefixes (CodePen 使用 Lea Verou -prefix-free )
关于html - 页面打开时缩放和淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18799722/