js+css实现图片马赛克幻灯片过渡动画效果代码

代码语言:html

所属分类:幻灯片

代码描述:js+css实现图片马赛克幻灯片过渡动画效果代码

代码标签: 马赛克 幻灯片 过渡 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">

 
<style>
    HTML
, BODY {
 
height: 100%;
}

BODY
{

}

svg
{
 
width: 800px;
 
height: 532px;
 
margin:80px auto;
}

</style>

 
</head>

<body>


 
<!-- Inspired by https://codepen.io/eeeps/pen/dqepQm -->

<svg viewBox="0 0 800 532">
 
<filter id="pixels" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
       
<feFlood flood-color="green" flood-opacity="1" x="0" y="0" width="1" height="1" result="flood"/>
       
<feComposite
     
id="composite"
     
in="SourceAlpha" in2="flood" operator="in" x="0" y="0" width="6" height="6" result="composite"/>
       
<feTile x="0" y="0" width="1000" height="1000" in="composite" result="tile1"/>
        <feComposite in=&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0