CSS realizes the example code of font color deepening in the selected area when scrolling

Time:2021-9-26

When encapsulating the date selector, the font color needs to be deepened when it is selected. First take a look at the effect after implementation

在这里插入图片描述

You can see that the deepening is not the whole text, but the middle area. Today’s focus is not on the encapsulation of the selector, but mainly on the style effect. To understand the implementation idea of this component, you can see the date selector in the previous articleImplementation idea:

1.First of all, it is where you enterregionThe color will deepen,Not the whole fontTherefore, we can’t start from selecting to change the text style. When we see the area, the first thing we think of isMantleYes

2.However, the mask realizes the middle colorEasy to become shallow, just addMask + transparent + positioningThat’s good. How about thatGammon layermiddlecolourinsteadDeepeningWell, if the tangle is solved from the selected part, the effect of color deepening will be deeply thought…

3.We know it’s easy to lighten the color, so let’sExcept for the middle selectionExtraneousDugamun layerLighten the color toSelected partOf course, it’s dark

4.Determined to giveUpper and lower Gammon layerAfter that, there are problems to consider. If a mask is added on it, it can also be triggeredtouchmoveScroll? I thought of it herestickylocation
firststickyIf it does not leave the stream document, triggertouchmoveIt is still triggered in this box

Code implementation:

//HTML structure
<body>
    <div class="box">
        <p class="top"></p>
        <p class="one">123123</p>
           ... many are omitted here
        <p class="one">123123</p>
        <p class="bottom"></p>
    </div>
</body>
//Style
<style>
    .box{
        margin-top: 100px;
        height: 420px;
        width: 300px;
        position: relative;
        background-color: fff;
        overflow: auto;
        border: indigo 1px solid;
    }
    p{
        margin:0;
        height: 20px;
        text-align: center;
    }
 //Add a mask above and below, white background and transparency to lighten the obscured text color
    .top{ 
        height: 200px;
        background-color: #fff;
        position: sticky;  //******* critical code
        top: 0;   //******* critical code
        opacity: .4; //******* critical code
    }
    .bottom{
        height: 200px;
        background-color: #fff;
        position: sticky;
        bottom: 0;
        opacity: .4;
    }
</style>

Effect achieved:

在这里插入图片描述

This is the end of this article about the example code of font color deepening in the selected area when CSS realizes scrolling. For more information about font color deepening in the selected area of CSS, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!