极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.qrcode {
margin-bottom: 4px;
padding-top: 10px;
}
.qrcode img {
width: 260px;
height: 255px;
padding-top: 20px;
margin-bottom: 10px;
}
.qrcode .blur{
-webkit-backface-visibility: hidden;
animation: toReal 1s;
}
@keyframes toReal {
from {
filter: blur(10px);
}
to {
filter: blur(0px);
}
}
</style>
</head>
<body>
<div class="qrcode">
<img src="./src/assets/background/qrcode.png" class="blur" />
</div>
</body>
</html>
代码如上。现在出现的问题是，图片模糊值回到0时会出现闪烁（动画结束后），即效果如下：
已尝试属性有：
-webkit-transform-style: preserve-3d;
animation-fill-mode: forwards;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
均无效，不排除自己没弄对。
运行环境：chrome v66。
希望有会的同学帮忙看下。
闪那一下是动画执行完了，回归到元素的原有模式时，因为没有
filter所以会闪一下。换用transition实现吧。animation更适合表现循环的动效。
大概其就是你先把
filter: blur(10px);写到元素本体上去，然后写个transition给1s的执行时间（如果还需要叠加其它效果的话，需要写下属性过滤），然后再单写一个类，里边就放filter: blur(0);，最后设计触发时机把这个类叠到元素上就行了。