CSS / JS模糊，鼠标周围除外

如何解决CSS / JS模糊，鼠标周围除外

我正在尝试从头开始开发一个网站。我正在使用html，css和js（我需要jQuery和其他js库）。我想要的代码可以放在任何地方，而无需安装额外的插件/脚本。所有需要的都应该放在一个文件夹中，我可以将其放置在任何位置并运行（即插即用样式），这样我就可以下载所有库（仅引导程序，jQuery和Vague.js atm）。

在其中一页中，我有多个图像以旋转木马的方式移动。图像覆盖页面，是页面上唯一的内容（除了徽标和菜单按钮）。我需要做的是使屏幕/图像模糊，并且只能看到光标周围的一个圆圈。目前，我设法使所有图像模糊，并在鼠标悬停在图像上时将它们聚焦，但是我不知道如何只聚焦图像的一小部分。

我知道这不是处理事物的理想方法，但是为了使轮播平稳运行并在多个页面中可复制，我不得不复制所有图像并进行css变换操作，关键帧移动-50％。我知道这部分可能会更好，您可以忽略。我目前拥有的是：

  return (
        <>enter code here
          <View style={styles.container}>
            <View style={styles.scrollContainer}>
              <ScrollView
                horizontal
                pagingEnabled
                showsHorizontalScrollIndicator={false}
              >
                {images.map((image) => (
                  <Image key={image} style={styles.image} source={image} />
                ))}
              </ScrollView>
            </View>
            <View style={styles.btn}>
              `enter code here`<LinearGradient
            colors={["#0A5640","#0A5640"]}
            style={{ alignItems: "center",borderRadius: 10 }}
          >
            <TouchableOpacity onPress={() => navigation.navigate("SignIn")}>
              <Text style={styles.btnAuth}>Sign In</Text>
            </TouchableOpacity>
          </LinearGradient>
          <LinearGradient
            colors={["#FFC72A","#FFC72A"]}
            style={{ alignItems: "center",borderRadius: 10 }}
          >
            <TouchableOpacity
              onPress={() => navigation.navigate("CreateAccount")}
            >
              <Text style={styles.btnAuth}>Sign Up</Text>
            </TouchableOpacity>
          </LinearGradient>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#0A5640",},scrollContainer: {
    height: "100%",image: {
    width,height: "100%",btnAuth: {
    fontSize: 18,fontWeight: "bold",paddingHorizontal: 60,paddingVertical: 10,color: "#fff",marginLeft: 10,btn: {
    color: "#fff",marginTop: 70,flexDirection: "row",alignItems: "center",justifyContent: "space-around",alignContent: "space-between",zIndex: 200,paddingRight: 10,paddingLeft: 10,bottom: 3,position: "absolute",});

<div class="scrollWrapper">
        <div id="scroll" class="imgScroll" onclick="toggleAnimation();">
            <img class="scrollingImage" src="image1.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image2.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image3.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image4.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image5.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image1.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image2.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image3.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image4.jpg" alt="Window showcase image">
            <img class="scrollingImage" src="image5.jpg" alt="Window showcase image">
        </div>
    </div>

.scrollWrapper{
    overflow: hidden;
}

.imgScroll{
    background-color: dimgrey;
    width: max-content;
    font-size: 0;
    z-index: -999;
    height: 100vh;
}

.scrollingImage{

    filter: blur(10px);
    -webkit-filter: blur(10px);

    display: inline-block;
    height: 100%;
}

.scrollingImage:hover{
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

@keyframes scrolling{
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
}

.imgScroll{
    animation: scrolling 60s linear infinite;
    z-index: -1000;
}

body .scrollWrapper .pause{
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
}

我当前的想法是使用scrollWrapper类模糊div，并以某种方式使光标周围的区域被聚焦，但是我不确定该怎么做。

我环顾四周，发现有this个帖子，但据我所知，解决方案仅适用于单个静态图像，而不适用于多个移动图像。我现在正在搞弄Vague.js，但不知道该怎么做。

我不是Web开发人员，并且与js / jquery的合作很少，所以由于无法弄清这一点，我开始感到愚蠢……这是我更改为完全不同的内容之前的最后一招，所以任何帮助将不胜感激。

解决方法

使用新 CSS backdrop-filter进行此操作非常容易，最困难的部分是在过滤器中设置孔。

幸运的是we have stackoverflow。

对于一个圆，最简单的方法可能是使用径向渐变作为mask-image，如this answer所示。

const blur_elem = document.getElementById( "blur-around" );
document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px,${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* twice the viewport size so it always covers fully */
  width: 200vw;
  height: 200vh;
  /* negative offset by half so we are sure we cover the full viewport */
  left: -100vw;
  top: -100vh;
  /* we'll use transform translate to move it */
  transform-origin: center;  
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  -webkit-mask-image: radial-gradient(50px at 50% 50%,transparent 100%,black 100%);
  mask-image: radial-gradient(50px at 50% 50%,black 100%)
}

/* falback for browsers that don't have backdrop-filter */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,255,.8);
  }
}

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

不幸的是，Safari不完全支持mask-image属性，因此我们可能还需要其他功能。

我们也可以将CSS clip-path与 evenodd 路径一起使用，如that answer所示。

不幸的是，Chrome仍然不支持path()的{{1}}函数，因此我们必须富有创造力，而应使用clip-path函数并定义每个点的顶点。
对于矩形，仍然需要先绘制元素大小的外部矩形，然后在需要的地方绘制内部矩形，同时确保始终关闭这两个形状。 >

polygon()

const blur_elem = document.getElementById( "blur-around" );
document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px,${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* twice the viewport size so it always covers fully */
  width: 200vw;
  height: 200vh;
  /* negative offset by half so we are sure we cover the full viewport */
  left: -100vw;
  top: -100vh;
  /* we'll use transform translate to move it */
  transform-origin: center;  
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);

  --rect-size: 100px;
  clip-path: polygon( evenodd,/* outer rect */
    0 0,/* top - left */
    100% 0,/* top - right */
    100% 100%,/* bottom - right */
    0% 100%,/* bottom - left */
    0 0,/* and top - left again */
    /* do the same with inner rect */
    calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),calc(50% + var(--rect-size) / 2) calc(50% - var(--rect-size) / 2),calc(50% + var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),calc(50% - var(--rect-size) / 2) calc(50% + var(--rect-size) / 2),calc(50% - var(--rect-size) / 2) calc(50% - var(--rect-size) / 2)
   );
}

/* falback for browsers that don't have backdrop-filter */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,.8);
  }
}

尽管要使其带有圆圈（如注释中所要求的那样）开始变得不太可读，并且虽然也可以在CSS中进行硬编码，但这会导致一个很大的规则，我宁愿直接留下一个此答案中的javascript生成器：

<div id="blur-around"></div>
<p>Works over any content</p>
<img src="https://picsum.photos/250/250">
<img src="https://picsum.photos/360/200">

function makeCircleHoleClipPathRule( radius ) {

  const inner_path = [];
  const circumference = Math.PI * radius;
  const step = Math.PI * 2 / circumference;
  // we are coming from top-left corner
  const start_step = circumference * (5 / 8);
  for( let i = start_step; i < circumference + start_step; i++ ) {
    const angle = step * i;
    const x = radius * Math.cos( angle );
    const y = radius * Math.sin( angle );
    const str = `calc( 50% + ${ x }px ) calc( 50% + ${ y }px )`;
    inner_path.push( str );
  }
  // avoid rounding issues
  inner_path.push( inner_path[ 0 ] );

  return `polygon( evenodd,/* and top - left again */
    ${ inner_path.join( "," ) }
   )`;

}

const blur_elem = document.getElementById( "blur-around" );
// set the clip-path rule
blur_elem.style.clipPath = makeCircleHoleClipPathRule( 50 );

document.onmousemove = (evt) => {
  blur_elem.style.transform = `translate(${evt.clientX}px,${evt.clientY}px)`;
};

#blur-around {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  /* twice the viewport size so it always covers fully */
  width: 200vw;
  height: 200vh;
  /* negative offset by half so we are sure we cover the full viewport */
  left: -100vw;
  top: -100vh;
  /* we'll use transform translate to move it */
  transform-origin: center;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
/* falback for browsers that dont have backdrop-filter */
@supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
  #blur-around {
    background-color: rgba(255,.8);
  }
}

但是，目前只有最新的Blink + Webkit浏览器支持 <div id="blur-around"></div> <p>Works over any content</p> <img src="https://picsum.photos/250/250"> <img src="https://picsum.photos/360/200"> ，但Gecko仍然缺少对此的支持。由于我怀疑还有许多其他的跨浏览器解决方案，因此您可以尝试this polyfill，它将在iframe中复制页面的内容（即效果不佳）。

CSS / JS模糊，鼠标周围除外

如何解决CSS / JS模糊，鼠标周围除外

解决方法

相关推荐