html图片闪现循环效果,CSS3 图片的模糊闪烁动画

本文介绍了一种使用CSS实现的复杂背景动画效果,包括对比度、模糊及饱和度滤镜的应用,以及通过伪元素和关键帧动画实现动态变化的背景大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS

语言:

CSSSCSS

确定

html {

overflow: hidden;

}

html,

html:before,

html:after {

height: 100vh;

width: 100vw;

background-image: url(/uploads/150101/coolgirl.jpg);

background-size: cover;

background-position: 50% 0;

}

html:before,

html:after {

content: '';

position: absolute;

top: 0;

left: 0;

display: block;

}

html:before {

-webkit-filter: contrast(5) blur(5px);

filter: contrast(5) blur(5px);

mix-blend-mode: difference;

}

html:after {

-webkit-filter: contrast(3) blur(5px) saturate(0.3);

filter: contrast(3) blur(5px) saturate(0.3);

mix-blend-mode: difference;

background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.1) 50%, #000 50%), url(/assets/coolgirl.jpg);

background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 50%, #000 50%), url(/assets/coolgirl.jpg);

background-blend-mode: screen;

background-size: 3vw, cover;

-webkit-animation: acid 0.6s infinite ease-in-out;

animation: acid 0.6s infinite ease-in-out;

}

@-webkit-keyframes acid {

0%, 100% {

-webkit-filter: contrast(5) blur(5px) saturate(0.3);

filter: contrast(5) blur(5px) saturate(0.3);

background-size: 3vw, cover;

}

10% {

-webkit-filter: contrast(2) blur(4px) saturate(0.3);

filter: contrast(2) blur(4px) saturate(0.3);

background-size: 2.5vw, cover;

}

50% {

-webkit-filter: contrast(5) blur(9px) saturate(0.3);

filter: contrast(5) blur(9px) saturate(0.3);

background-size: 9vw, cover;

}

70% {

-webkit-filter: contrast(5) blur(7px) saturate(0.3);

filter: contrast(5) blur(7px) saturate(0.3);

background-size: 2.5vw, cover;

}

}

@keyframes acid {

0%, 100% {

-webkit-filter: contrast(5) blur(5px) saturate(0.3);

filter: contrast(5) blur(5px) saturate(0.3);

background-size: 3vw, cover;

}

10% {

-webkit-filter: contrast(2) blur(4px) saturate(0.3);

filter: contrast(2) blur(4px) saturate(0.3);

background-size: 2.5vw, cover;

}

50% {

-webkit-filter: contrast(5) blur(9px) saturate(0.3);

filter: contrast(5) blur(9px) saturate(0.3);

background-size: 9vw, cover;

}

70% {

-webkit-filter: contrast(5) blur(7px) saturate(0.3);

filter: contrast(5) blur(7px) saturate(0.3);

background-size: 2.5vw, cover;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值