svg+css实现图片水纹filter滤镜动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现图片水纹filter滤镜动画效果代码
代码标签: svg css 图片 水纹 filter 滤镜 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Zeyada&display=swap'> <style> body { height: 100vh; margin: 0; place-items: center; background-color: aliceblue; } .grid-container { display: grid; gap: 20px 20px; grid-template-columns: auto auto auto; } .grid-item { padding: 20px; } .filter-image { text-align: center; width: 30vw; height: 80vh; object-fit: cover; background: white; padding: 10px 10px 35px; text-align: center; text-decoration: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: all 0.15s linear; z-index: 0; position: relative; transform: rotate(4deg); } .photo1, photo2 { padding: 1rem; filter: drop-shadow(0 2px 1px darkgrey); display: inline-block; } .photo1 { filter: url(#crumple-effect-1); } .photo2 { filter: url(#crumple-effect-2); } .photo3 { filter: url(#crumple-effect-3); } .photo1:hover, .photo2:hover, .photo3:hover { filter: sepia(50%); transform: rotate(-6deg); } </style> </head> <body translate="no"> <div class="grid-container"> <div class="grid-item photo1"> <img class="filter-image" src="//repo.bfw.wiki/bfwrepo/image/628437b97cda2.png"> </div> <div class="grid-item photo2"> <img class="filter-image" src="//repo.bfw.wiki/bfwrepo/image/629a8c7fd8ea6.png"> </div> <div class="grid-item photo3"> <img class="filter-image" src="//repo.bfw.wiki/bfwrepo/image/62de84ba13711.png"> </div> </div> <svg> <defs> <filter id="crumple-effect-1"> <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.1" numOctaves="5" result="turbulence"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0