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