如何使背景图像在页面打开/刷新时缓慢模糊?

How can I make a background image slowly blur on page opening/ refreshing?

本文关键字：刷新 缓慢 模糊 背景 何使 图像      更新时间：2023-09-26

我试图在页面打开/刷新时将我的背景图像从正常状态过渡到模糊(3px)。是否有办法做到这一点与-webkit过渡或我需要使用javascript?

Wyze和我已经为你创建了一个jsFiddle，我认为你正在要求什么。如果这是你需要的，请投票。

<div id="background" class="blur"></div>
#background {
    background-image: url('http://www.comicsandmemes.com/wp-content/uploads/WTF-meme.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
}
.blur {
  -webkit-animation: blur 5s;  
  -moz-animation: blur 5s;
  animation: blur 5s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;  
  animation-fill-mode: forwards;  
}
@-webkit-keyframes blur {
  0% { 
        -webkit-filter: blur(0px);
    }
  0% { 
        -webkit-filter: blur(1px); 
    }
  50% { 
        -webkit-filter: blur(2px);
    }
  100% { 
        -webkit-filter: blur(3px); 
    }
}
@-moz-keyframes blur {
  0% { 
        -moz-filter: blur(0px);
    }
  0% { 
        -moz-filter: blur(1px); 
    }
  50% { 
        -moz-filter: blur(2px);
    }
  100% { 
        -moz-filter: blur(3px); 
    }
}
@keyframes blur {
  0% { 
        filter: blur(0px);
    }
  0% { 
        filter: blur(1px);
    }
  50% { 
        filter: blur(2px);
    }
  100% { 
        filter: blur(3px); 
    }
}
https://jsfiddle.net/1e7mo2cp/

看一下这段代码:

.blur {
  -webkit-animation: blur 3s ;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  100% { -webkit-filter: blur(3px); }
}
 <img src="http://placehold.it/350x150" class="blur" />

这允许你设置一个类，它将使用CSS动画和一个类过渡模糊。你可以在这里找到更多关于CSS动画的信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

相关文章：