Изменить непрозрачность изображения в CSS - PullRequest
Новая
       18

Изменить непрозрачность изображения в CSS

0 голосов
/ 02 февраля 2019

Как мне анимировать непрозрачность изображения с 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>

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Вы можете использовать свойства 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>
0 голосов
/ 02 февраля 2019

Вы можете использовать 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

...