Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve the spotlight effect of css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Brief introduction

CSSVariables, something that's not that new, but it's definitely a revolution for css.

In the past, when using variables, we need to use preprocessing tools such as sass, less, and so on, but now we can directly use css to declare variables.

Compatibility

The old rule, let's take a look at compatibility.

Compatibility is green and red. Isn't there two more? How can you do great things in a small way? let it gun away.

Grammar.

The syntax is a little ugly but simple,-- * to declare the variable name, var (--*) to use, you may want to ask, why use-- do not use the same kind of $, alas, isn't that used by sass and less?

Declaration and use must be placed in {} code blocks

Body {

-- bg-color:lightblue

Background-color:var (--bg-color)

}

Whether the code is very simple or not, you can look at the effect directly, so we won't repeat it.

Global variables and variable coverage

The variables declared in the root code block are global variables, and local variables override global variables

: root {

-- bg-color:red

}

Body {

-- bg-color:lightblue

Background-color:var (--bg-color)

}

The last thing that takes effect is that the value of the bg-color:lightblue,bg-color variable becomes lightblue

The default value of the variable

The complete variable uses the syntax var ([,]?), and the following values are used when the variable is not defined. Look at the following example

Body {

-- 1:red

Color:var (--2 blue)

}

The above code will look for the-2 variable in the scope of body. If it doesn't have it, it will look for the global. If it doesn't have it, it will use the following value, so the last effective color is blue.

As you can see, our variable names above use numbers directly: joy:,css variables are very interesting, not just numbers, but also Chinese characters.

Participate in calculation

: root {

-- bg-color:lightblue

-- text color: white

-- fong-size:30

}

Body {

Background-color:var (--bg-color)

}

P {

Color:var (--text color)

Font-size:var (--fong-size) px

}

What is the size of the text in p at this time? It is the default size of the browser, why not the 30px we imagined? this is because the variable conversion will end with a space, and the var (--fong-size) px will be converted to 30px.

We can honestly declare variables with units.

-- fong-size:30px

Or use calc () to calculate the attribute

Font-size:calc (var (--fong-size) * 1px)

Js acquisition and assignment

We can use js to get and assign css variables, you see, is not always convenient, buddy.

: root {

-- bg-color:lightblue

}

/ / get

GetComputedStyle (document.documentElement) .getPropertyValue ('--bg-color') / / lightblue

/ / assignment

Document.documentElement.style.setProperty ('--bg-color','yellowgreen')

Simple application

Above we introduced the declarative use of css variables and the use of js to get and assign values, and then we finished the effect of a spotlight (I made it up myself, I don't know what to call it)

Before writing the code, let's sort out the train of thought, how to achieve this effect, mainly include the following steps: 1, declare the global css variable 2, set body to the pure black background, add p and set background figure 3, crop the background image of p with clip-path, use the variable to set the center position 4, add mouse events, and dynamically change the css variable, that is, the center position.

Next, start writing code.

The layout is very simple, just a p, let's mainly talk about the css style.

: root {

-- XRO 40

-- YRO 40

}

* {

Padding:0

Margin:0

}

Body {

Width:100vw

Height:100vh

Background:#000

}

P {

Width:100%

Height:100%

Background:url ('.. / images/bg.png') 00no-repeat

Clip-path:circle (100pxatcalc (var (--x) * 1px) calc (var (--y) * 1px))

Background-size:cover

}

Use the * wildcard to simply and roughly kill the default style of the browser. Body is set to 100%. Here, vw and vh units are used, which means that the viewport is divided into 100 parts. 100vw is 100% wide, which is the same as vh.

The point is, two variables-- x and-- y are declared with css, and then clip-path:circle (100pxatcalc (var (--x) * 1px) calc (var (--y) * 1px) is used when cropping in p style. We use clip-path to crop a circle with the following syntax

Clip-path:circle (Radius at Center X Axis coordinate)

At this point, a circle like this is displayed on the page

In the final step, we add the mouse follow event and change the values of-x and-y

Document.addEventListener ('mouseover',function (e) {

Document.documentElement.style.setProperty ('--Xerogramma e. ClientX)

Document.documentElement.style.setProperty ('--yawne.clientY)

})

At this point, we use the css variable to achieve a simple effect. There are more scenarios for using the css variable, so please make the most of it.

For detailed code, please move github.

Summary

1. Can be used in nesting

: root {

-- green:green

-bgcolor:var (--green)

}

2. Illegality of variables

P {

-- color:10px

Background-color:yellow

Background-color:var (--color,green)

}

What is the background color of p at this time?

A.rgba (0d0d0j0p0p0p0p0p0)

B.10pxCyellowDgreen

The answer is A.

To put it simply, it is not legal when the variable is declared, and the background color obviously cannot be 10px, so the browser will use the default value. This default value is not the default value of the variable, but the browser's own default value background-color:var (--color,green) will become background-color:rgba.

This is the end of the article on "how to achieve the spotlight effect of css". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.