前端开发者| java开发 h5前端设计 |
| web前端开发和java开发 |
| java软件开发web前端 |
有gif的既视感html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>无标题文档</title>
<script>
function eventAnim() {
$(‘.elm_4_1,.elm_4_2,.elm_4_3’).css(‘opacity’, ‘0’)
$(‘.elm_4_1’).animate({ opacity: 0.3 }, 150)
$(‘.elm_4_1’).animate({ opacity: 0 }, 0)
$(‘.elm_4_2’)
.delay(100)
.animate({ opacity: 0.3 }, 150)
$(‘.elm_4_2’).animate({ opacity: 0 }, 0)
$(‘.elm_4_3’)
.delay(200)
.animate({ opacity: 0.3 }, 150)
$(‘.elm_4_3’).animate({ opacity: 0 }, 0)
$(‘.elm_4_4’)
.delay(300)
.animate({ opacity: 0.3 }, 150)
$(‘.elm_4_4’).animate({ opacity: 0 }, 0)
}
var _time = setInterval(function() {
eventAnim()
}, 2500)
</script>
<style>
* {
margin: 0;
padding: 0;
}
.ad {
max-width: 1920px;
height: 1044px;
position: relative;
background: url(https://olpnhrh8v.qnssl.com/0623pc/images/bg.png)
no-repeat;
}
.ad img {
display: block;
width: 926px;
height: 228px;
position: absolute;
top: 190px;
left: 0;
right: 0;
margin: auto;
}
.dim {
display: block;
width: 926px;
height: 228px;
position: absolute;
top: 190px;
left: 0;
right: 0;
margin: auto;
}
.elm_4_1,
.elm_4_2,
.elm_4_3,
.elm_4_4 {
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
}
.elm_4_1 {
top: 6px;
left: 6px;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);
}
.elm_4_2 {
top: -6px;
left: 6px;
webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false);
}
.elm_4_3 {
top: 6px;
left: -6px;
webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=false);
}
.elm_4_4 {
top: -6px;
left: -6px;
webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
}
</style>
</head>
<body>
<div class=”ad”>
<img src=”https://olpnhrh8v.qnssl.com/0623pc/images/text.png” />
</div>
<div class=”dim”>
<div class=”elm_4_1″>
<img src=”https://olpnhrh8v.qnssl.com/0623pc/images/text.png” />
</div>
<div class=”elm_4_2″>
<img src=”https://olpnhrh8v.qnssl.com/0623pc/images/text.png” />
</div>
<div class=”elm_4_3″>
<img src=”https://olpnhrh8v.qnssl.com/0623pc/images/text.png” />
</div>
<div class=”elm_4_4″>
<img src=”https://olpnhrh8v.qnssl.com/0623pc/images/text.png” />
</div>
</div>
</body>
</html>
» 本文来自：前端开发者 » 《前端开发CSS3模糊视觉差动画》
» 本文链接地址：https://www.rokub.com/8179.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册