css+js实现个人图像马赛克模糊加载动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现个人图像马赛克模糊加载动画效果代码
代码标签: css js 个人 图像 模糊 马赛克 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000814; } .main_container { width: 100%; min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .outerImage { width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; background-image: url("//repo.bfw.wiki/bfwrepo/image/649d3d1393275.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_600,/quality,q_90"); background-size: cover; background-position: center; overflow: hidden; border-radius: 20%; } .innerImage { width: 100%; height: 100%; background-size: cover; background-position: center; clip-path: polygon(20% 20%, 80% 20%, 60% 70%, 20% 70%); border-radius: 20%; } </style> </head> <body translate="no"> <div class="main_container"> <div class="outerImage" onmouseenter="removePixelation()" onmouseleave="applyPixelation()" > <canvas id="canvas" class="innerImage"></canvas> </div> </div> <script > var img = new Image(); img.crossOrigin = "Anonymous"; // Set the crossOrigin attribute img.src = "//repo.bfw.wiki/bfwrepo/image/649d3d1393275.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_600,/quality,q_90"; img.onload = function () { console.log("image loaded"); draw(this); }; var pixels = []; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var size = 120; // size of the pixels, if it's a high res image, increase the size var imgData = {}; function draw(img) { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); applyPixelation(); } var originalImagel; function applyPixelation() { console.log("applying pixelation"); originalImagel = ctx.getImageData(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height); // Create an.........完整代码请登录后点击上方下载按钮下载查看
网友评论0