Implementierung von benutzerdefinierten CSS-Eigenschaften und Spotlight-Effekten (Code)

In diesem Artikel geht es um die Implementierung (Code) von benutzerdefinierten CSS-Attributen und Spotlight-Effekten. Ich hoffe, dass er für Freunde hilfreich ist.

Einführung

CSS-Variablen, eine Sache, die nicht so neu ist, aber definitiv eine Revolution für CSS darstellt.

Bei der vorherigen Verwendung von Variablen mussten wir Vorverarbeitungstools wie Sass und Less verwenden. Jetzt können wir CSS direkt zum Deklarieren von Variablen verwenden.

Kompatibilität

Alte Regeln, schauen wir uns zuerst die Kompatibilität an

Kompatibilität ist grün, rot nicht gibt es noch zwei? Wie kann man sich bei großen Dingen an kleine Details halten? Die

-Syntax ist etwas hässlich, aber sehr einfach.

wird zum Deklarieren von Variablennamen verwendet. Vielleicht möchten Sie fragen, warum stattdessen

verwendet wird von --* Was die Klasse betrifft, werden Sass und Less nicht dafür verwendet? var(--*)--$Die Deklaration und Verwendung muss im {}-Codeblock platziert werden

body{
    --bg-color: lightblue;
    background-color: var(--bg-color);
}

Der Code ist sehr einfach, man kann den Effekt direkt sehen, daher werde ich nicht auf Details eingehen.

Globale Variablen und Variablenüberschreibungen

Die im

-Codeblock deklarierten Variablen sind globale Variablen, und lokale Variablen überschreiben globale Variablen

:root{
    --bg-color: red;
}
body{
    --bg-color: lightblue;
    background-color: var(--bg-color);
}

Die letzte, die benötigt wird Wirkung ist:root, der Wert der

-Variable wird

--bg-color: lightbluebg-color zum Standardwert der Variablen lightblue

Die vollständige Variable verwendet die Syntax

, wenn die Variable ist nicht definiert, der letztere Wert wird verwendet. Schauen Sie sich das folgende Beispiel an:

body{
--1: red;
color:var(--2, blue);
}

Der obige Code sucht nach der Variablen var( [, ]? ) im Bereich von

. Wenn sie nicht gefunden wird, wird nach der globalen Variablen gesucht , es wird der nachfolgende Wert verwendet, sodass die endgültige Farbe wirksam ist

body, unsere Variablennamen verwenden nicht nur Zahlen, sondern auch auch chinesische Schriftzeichen sind akzeptabel. --2

Beteiligen Sie sich an der Berechnung

:root{
    --bg-color: lightblue;
    --文字颜色: white;
    --fong-size: 30;
}
body{
    background-color: var(--bg-color);
}
div{
    color: var(--文字颜色);
    font-size: var(--fong-size)px;
}

Wie groß ist der Text in p derzeit? Es ist die Standardgröße des Browsers. Das liegt daran, dass am Ende ein Leerzeichen steht, wenn

. Wir können die Variable ehrlich deklarieren

--fong-size: 30px;

var(--fong-size)px oder 30 pxberechnetes Attribut

 font-size: calc(var(--fong-size) * 1px);

calc()

js verwenden Erfassung und ZuweisungWir können js verwenden, um CSS-Variablen abzurufen und zuzuweisen. Schauen Sie, das ist so praktisch, altes Eisen.

:root{
     --bg-color: lightblue;
}

 // 获取
getComputedStyle(document.documentElement).getPropertyValue('--bg-color')  // lightblue
        
 // 赋值
document.documentElement.style.setProperty('--bg-color', 'yellowgreen')

Einfache Anwendung

Oben haben wir die Deklaration und Verwendung von CSS-Variablen sowie die Verwendung von js zum Abrufen und Zuweisen von Werten eingeführt. Als nächstes haben wir einen Spotlight-Effekt abgeschlossen (ich habe ihn blind gemacht). Ich weiß nicht, wie es heißen soll.) Nein, es sieht so aus. Das GIF-Bild hängt etwas fest, bitte warten Sie ab und sehen Sie es sich an

Bevor wir den Code schreiben, klären wir die Ideen und wie dieser Effekt erzielt werden kann. Die wichtigsten sind wie folgt: Ein paar Schritte 1. Deklarieren Sie globale CSS-Variablen 2. Stellen Sie den Körper auf einen rein schwarzen Hintergrund ein, fügen Sie p hinzu und legen Sie das Hintergrundbild fest 3. Verwenden Sie

zum Zuschneiden das Hintergrundbild von p und verwenden Sie Variablen, um die Position des Kreismittelpunkts festzulegen

4. Fügen Sie Mausereignisse hinzu und ändern Sie dynamisch die CSS-Variable, die die Mittelposition des Kreises darstellt

Als Nächstes beginnen Sie mit dem Schreiben Code
clip-pathDas Layout ist sehr einfach, es ist nur ein Div. Reden wir hauptsächlich über den CSS-Stil

:root{
    --x: 40;
    --y: 40;
}
*{
    padding: 0;
    margin: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background: #000;
}
div{
    width: 100%;
    height: 100%;
    background: url('../images/bg.png') 0 0 no-repeat;
    clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px));
    background-size: cover;
}

Verwenden Sie den Platzhalter

, um den Standardstil des Browsers einfach und grob zu entfernen Hier werden die Einheiten

und

verwendet, was bedeutet, dass das Ansichtsfenster in 100 gleiche Teile unterteilt ist.

ist 100 % breit,

auf die gleiche Weise . *vwHier kommt der wichtige Punkt. Verwenden Sie CSS, um zwei Variablen vh und 100vw zu deklarieren, und verwenden Sie dann vh beim Zuschneiden im

-Stil. Wir verwenden

, um einen Kreis zuzuschneiden . Die Syntax von , und ändern Sie die Werte von --x und --y prrreeclip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px)) An dieser Stelle verwenden wir CSS-Variablen, um einen einfachen Effekt zu erzielen. Es gibt bitte weitere Verwendungsszenarien für CSS-Variablen genießen Sie es. clip-path

Detaillierten Code finden Sie auf Github

小结

1、可以嵌套使用

:root{
    --green: green;
    --bgcolor: var(--green);
}

2、变量的不合法

div {
  --color: 10px;
  background-color: yellow;
  background-color: var(--color, green);
}

此时p的背景色是什么呢？

A rgba(0,0,0,0)  B 10px  C yellow  D green

答案是 A

简单来说是变量声明的时候不是合法的，背景色显然不能是10px，所以浏览器就会使用默认值，这个默认值并不是使用变量的默认值，是浏览器自己的默认值
background-color: var(--color, green)就会变成background-color: rgba(0,0,0,0)

相关推荐：

jquery实现聚光灯效果的方法_jquery

CSS实现图片动态效果的相关属性介绍

Das obige ist der detaillierte Inhalt vonImplementierung von benutzerdefinierten CSS-Eigenschaften und Spotlight-Effekten (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!