halo文章图片赖加载渐变模糊过度动画样式
/opt/1panel/apps/halo/halo/data/themes/theme-hao/templates/assets/zhheo/zhheoblog.css
#recent-posts > .recent-post-item .post_cover img.entered {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
transition: opacity 1s;
will-change: transform; /* 添加性能优化 */
animation: blur-to-clear 2s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 normal
backwards running,
scale 1.5s cubic-bezier(0.62, 0.21, 0.25, 1) 0s 1 both;
}
@keyframes blur-to-clear {
0% {
filter: blur(50px);
opacity: 1;
}
100% {
filter: blur(0);
opacity: 1;
}
}
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果