Question

如何使图像的不透明度从0.5变为1？我正在制作启动画面，并且我希望在图像的不透明度达到1时更改我的网站。这是我的代码：

.preload{
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
}
.logo {
  display: block;
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  opacity: 0.5;
}

<div class = "preload" id="preload">
  <div class ="logo">
    <img src = "https://www.gstatic.com/webp/gallery/5.sm.jpg" class = "logo">
  </div>
</div>

Answer 1

您可以使用 CSS动画

.preload{
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    top: 0;
    left: 0;}
.logo {
    display: block;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    opacity: 0.5;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity:1;
    }
}

https://www.w3schools.com/css/css3_animations.asp

Answer 2

您可以使用CSS animation属性。试试这个：

.preload{
  width: 100%;
  height: 100%;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
}
.logo {
  display: block;
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  animation: example 3s linear infinite;
}
@keyframes example {
  0%   {opacity: 0.0;}
  25%  {opacity: 0.25;}
  50%  {opacity: 0.50;}
  75%  {opacity: 0.75;}
  100% {opacity: 1;}
}

<div class = "preload" id="preload">
  <div class ="logo">
    <img src = "https://www.gstatic.com/webp/gallery/5.sm.jpg" class = "logo">
  </div>
</div>

更改CSS中图像的不透明度

2 个答案: