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

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;

}

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

c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
ae图片无缝循环滚动_HTML图片滚动
HTML图片无缝滚动鼠标悬停 <!DOCTYPE html> <html> <head><title>无缝滚动</title> </h ...
html图片向下浮动,css3图片上下浮动动画
一.float定义float属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.按照张鑫旭 ...
收起展开循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
css3夜空北斗七星闪烁动画js特效
下载地址 css3绘制的夜空网页效果,北斗七星闪烁动画特效. dd:
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
css怎么设置图片卷角效果,CSS3 带分隔线卷角贴纸效果
CSS 语言: CSSSCSS 确定 body { padding-top: 2.5em; background-color: #666; color: #333; font-size: 84%; f ...
html图片的边框属性,css3图片边框border-image的用法
对于CSS属性 border ,相信所有的WEB开发人员都非常熟悉.我们可通过设置HTML元素的 border 的宽度.颜色.样式,来让HTML元素表现出不同的边框,比如双线.虚线.圆点线.但不管你怎 ...

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

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

最新文章

热门文章