Hi, I’m Steven.

In this video, we’re going to do a slider to zoom in on the emoji. As the cursor moves across the emoji, the emoji will zoom in. In addition, the background gray will also have an irregular smooth line enlargement, which we will do in SVG.

This video version of the tutorial at www.bilibili.com/video/BV1DK… , welcome the attention of three companies!

Part of the HTML

Open the CodePen editor and add the < SVG > tag to the HTML. Then add a rectangle, width 300, height 50, x is 0, y is 50 move down a bit, rx is 25, so it is a rounded rectangle, and the color is light gray #e3e3e3.

Add another circle, set the position, cx to 40, cy to 75, radius to 40, and color to light gray again, and give it an ID pop.

So let’s deal with, how do we change this position to a smooth transition, and I don’t know how to describe it, but if I don’t have a word for it, you get the idea.

Add the

tag, set the ID to mix, and then combine the

and

with a

tag, that is, group. Filter =url(#mix) apply mix to

, add

tag, set in to SourceGraphic, set result to blur, Then stdDeviation is set to 5, that is, gaussian ambiguity is 5.





Add < feColorMatrix > tag, in = “blur”, mode = “matrix”, fill the value in 1 0 0 0 0, 1 0 0 0 0, 0 0 0 0 1, the three groups are used to set the RGB color, RGB we don’t change, So let’s keep the original value. The final group is Alpha opacity, which is set to 0, 0060-36. This means that gaussian blur is applied first, and then the color matrix is used to calculate the new color ratio. The lighter gray part is transparent, and the darker gray part is gray.

I tried out these two values, 60-36, so you can try them out. The use of

and related formulas can be found on the MDN web page.

Now that you’ve got the circle and rectangle, add the emoji. Add the

    tag before < SVG > and name the class emojis. Then add five more

  • and add emoticons.

Part of the CSS

Go to the CSS section, add the Body selector, and use Flex to center up, down, left, and right.

Add the. Emojis selector and set list-style to None. Unstyle the original list, set margin and padding to 0, and set the width to 600px.

Then position is set to absolute, top and left are set to 50%, and transform is set to translate(-50%, -50%). In this way, it can be centered up, down, left, and right in position absolute. Add a bit of padding left and right to set it to 20px, box-sizing to border-box and display to flex.

Add the. Emojis Li selector and set flex to 1 so that the five

  • in it can split the space equally. Font-size: 60px, text-align: center.

    • Emojis Li :hover selector, transform: scale(1.6), transition:.2s all ease-in-out

    Part of the JavaScript

    Now that you’re done, add some code in JavaScript to move the circles in < SVG >.

    Add document.querySelector(‘.emojis’).addeventListener (‘mousemove’) to listen for mouse movements, define a variable called offset, and add e.clientx to the cursor’s X coordinates, Minus the e.c. with our fabrication: urrentTarget. GetBoundingClientRect () left on the left side of the displacement, and then divided by 2.

    Then apply setAttribute() to #pop’s Cx and modify the maximum distance it can move to the left and right. Since the radius of the circle is 40, it is 40 when offset is less than 40 and 260 when offset is greater than 260.

    Finally, how do I get a circle when I move into the past? Move the R property of

    in HTML to CSS. Add the. Emojis: SVG #pop selector, set r to 20, add the. Emojis: SVG #pop selector, set r to 40.

    Don’t forget to add back some animation transitions, transition:.2s r ease-in-out.

    Let’s look at the completion of this case

    Above, is this set to introduce all content.

    The source code for this case is at codepen. IO /stevenlei/p…

    Your support is my motivation, please pay attention to CodingStartup at least class, we come together!

    • B station: space.bilibili.com/451368848
    • YouTube: youtube.com/codingstart…
    • The Denver nuggets: juejin. Cn/user / 249773…