js+css实现跟随鼠标圈圈内图片局部变清晰效果代码-html代码-BFW代码库

js+css实现跟随鼠标圈圈内图片局部变清晰效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现跟随鼠标圈圈内图片局部变清晰效果代码

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

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

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

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Special+Elite&display=swap');
*{
  margin:0;
  padding:0;
  
}
.wrapper{
  position:relative;
  width: 100vw;
  height: 100vh;
  overflow:hidden;
}
.image{
    background-image: url('//repo.bfw.wiki/bfwrepo/image/6351f7d45da88.png');
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: relative;
    
    --x: 40px;
    --y: 20px;
  }
  .image_blur{
    background-image: url('//repo.bfw.wiki/bfwrepo/image/6351f7d45da88.png');
    filter: blur(5px);
    background-size: cover;
   position: absolute;
   left: 0;
   top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    -webkit-mask-repeat: no-repeat no-repeat;
    mask-repeat: no-repeat no-repeat;
    -webkit-mask-image: radial-gradient(75px at var(--x) var(--y), transparent 95%, rgb(36, 36, 36) 100%);
    mask-image: radial-gradient(75px at var(--x) var(--y), transparent 95%, rgb(36, 36, 36) 100%);
  }
  .btn{
    position: absolute;
    color:#A82300;
    left: 3rem;
    bottom: 1rem;
    width: 50px;
    height: 50px;
    background-color:#257EE2;
    border: 2px solid .........完整代码请登录后点击上方下载按钮下载查看