How to add a Border to a mask in CSS, HTML, JavaScript? - Stack Overflow

admin管理员组

文章数量:1025203

I want to add a blue border to my mask and I'm struggling with that for few days. This is the situation:

When you scroll down, a circle appears and gradually gets bigger. Inside this circle, the new section becomes visible. Essentially, it transitions you to the next section. I would like this circle to have a thick blue border.

When you look at the picture, you can see that the user cannot immediately notice the circle that opens when scrolling. Therefore, I would like the transparent window to have a border to make it clearer what is happening.

Here is the code:

HTML

<div class="overlay-container">
      <div class="fixed-sections">
        <section class="animation-section">
          ...
        </section>

        <section class="interactive-section">
          <div class="scroll-overlay"></div>

          <div class="custom-cursor">
            <div class="cursor-line-horizontal"></div>
            <div class="cursor-line-vertical"></div>
            <div class="cursor-circle"></div>
          </div>

          <div class="interactive-text">
            <h1>I love making <br>things interactive</h1>
          </div>
        </section>
      </div>
    </div>

CSS

.overlay-container {
    position: relative;
    height: 250vh;
}

.fixed-sections {
    position: sticky;
    top: 0;
    height: 100vh;
}

.animation-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 125vh;
    width: 100%;
    z-index: 1;
    background: black;
}

.interactive-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 20;
    background: black;
    -webkit-mask-image: radial-gradient(
        circle at center, 
        black 0%, black 30%, transparent 30%);
    mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 30%);
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

I tried the border property but it's not working. I also tried the Box Shadow and it didn’t help either. Or I did something wrong.

I want to add a blue border to my mask and I'm struggling with that for few days. This is the situation:

When you scroll down, a circle appears and gradually gets bigger. Inside this circle, the new section becomes visible. Essentially, it transitions you to the next section. I would like this circle to have a thick blue border.

When you look at the picture, you can see that the user cannot immediately notice the circle that opens when scrolling. Therefore, I would like the transparent window to have a border to make it clearer what is happening.

Here is the code:

HTML

<div class="overlay-container">
      <div class="fixed-sections">
        <section class="animation-section">
          ...
        </section>

        <section class="interactive-section">
          <div class="scroll-overlay"></div>

          <div class="custom-cursor">
            <div class="cursor-line-horizontal"></div>
            <div class="cursor-line-vertical"></div>
            <div class="cursor-circle"></div>
          </div>

          <div class="interactive-text">
            <h1>I love making <br>things interactive</h1>
          </div>
        </section>
      </div>
    </div>

CSS

.overlay-container {
    position: relative;
    height: 250vh;
}

.fixed-sections {
    position: sticky;
    top: 0;
    height: 100vh;
}

.animation-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 125vh;
    width: 100%;
    z-index: 1;
    background: black;
}

.interactive-section {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 20;
    background: black;
    -webkit-mask-image: radial-gradient(
        circle at center, 
        black 0%, black 30%, transparent 30%);
    mask-image: radial-gradient(circle at center, black 0%, black 30%, transparent 30%);
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

I tried the border property but it's not working. I also tried the Box Shadow and it didn’t help either. Or I did something wrong.

本文标签： How to add a Border to a mask in CSSHTMLJavaScriptStack Overflow