Implémentation de propriétés personnalisées CSS et d'effets Spotlight (code)

Ce que cet article vous apporte concerne l'implémentation (code) des attributs personnalisés CSS et des effets de projecteur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Introduction

Les variables CSS, une chose qui n'est pas si nouvelle, mais qui constitue définitivement une révolution pour le CSS.

Lorsque nous utilisions des variables auparavant, nous devions utiliser des outils de prétraitement tels que sass et moins. Nous pouvons désormais utiliser directement CSS pour déclarer des variables.

Compatibilité

Anciennes règles, regardons d'abord la compatibilité

La compatibilité est verte, rouge non il y en a deux de plus ? Comment pouvez-vous vous en tenir aux petits détails lorsque vous faites de grandes choses ?

syntaxe

la syntaxe est un peu moche mais très simple --* est utilisée pour déclarer les noms de variables et var(--*) est utilisée. Peut-être voulez-vous demander pourquoi utiliser -- à la place. de $ Quant à la classe, hélas, n'est-ce pas à cela que servent sass et less

La déclaration et l'utilisation doivent être placées dans le bloc de code {}

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

Le code est très simple, vous pouvez voir l'effet directement, donc je n'entrerai pas dans les détails.

Variables globales et remplacements de variables

Les variables déclarées dans le bloc de code :root sont des variables globales, et les variables locales écraseront les variables globales

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

La dernière qui prend effet est --bg-color: lightblue, la valeur de la variable bg-color devient lightblue

la valeur par défaut de la variable

La variable complète utilise la syntaxe var( [, ]? ), lorsque le La variable n'est pas une heure définie, cette dernière valeur sera utilisée. Regardez l'exemple suivant

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

Le code ci-dessus recherchera la variable body dans la portée de --2 Si elle n'est pas trouvée, elle recherchera la variable globale si elle l'est. introuvable, il utilisera la valeur la plus récente, donc cela prendra effet à la fin. La couleur est bleue

Comme vous pouvez le voir, nos noms de variables ci-dessus utilisent directement des nombres. Non seulement les chiffres, mais aussi les caractères chinois sont acceptables.

Participer au calcul

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

Quelle est la taille du texte en p à ce moment ? C'est la taille par défaut du navigateur. Pourquoi n'est-elle pas 30px comme nous l'imaginions ? C'est parce qu'il y aura un espace à la fin lorsque la variable var(--fong-size)px sera convertie en 30 px

. On peut déclarer la variable honnêtement en apportant l'unité

--fong-size: 30px;

ou utiliser

l'attribut calculé calc()

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

.

acquisition et affectation de js

Nous pouvons utiliser js pour obtenir et attribuer des variables CSS Écoutez, c'est tellement pratique, vieil homme.

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

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

Application simple

Ci-dessus, nous avons introduit la déclaration et l'utilisation de variables CSS et l'utilisation de js pour obtenir et attribuer des valeurs. Ensuite, nous avons réalisé un effet de projecteur (je suis aveugle). (Je ne sais pas comment ça devrait s'appeler), Non, ça ressemble à ça. L'image GIF est un peu bloquée, veuillez patienter et voir

Avant d'écrire le code, trions les idées et comment obtenir cet effet. Les principales sont les suivantes Quelques étapes

1. Déclarez les variables CSS globales
2. Définissez le corps sur un fond noir pur, ajoutez p et définissez l'image d'arrière-plan
3. Utilisez
pour recadrer l'image d'arrière-plan de p et utilisez des variables pour définir la position du centre du cercle clip-path 4. Ajoutez des événements de souris et modifiez dynamiquement la variable CSS, qui est la position centrale du cercle

Ensuite, commencez à écrire code

La mise en page est très simple, c'est juste un div Parlons principalement du style css

: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;
}

Utilisez le caractère générique

pour supprimer simplement et grossièrement le style par défaut du navigateur. , et réglez le corps à 100 %. Les unités * et vw sont utilisées ici, ce qui signifie que la fenêtre d'affichage est divisée en 100 parties égales,  C'est-à-dire que 100 parties de largeur correspondent à 100 % de largeur, vh De même. 100vwvhVoici le point important. Utilisez CSS pour déclarer deux variables

et

, puis utilisez --x lors du recadrage dans le style --y. Nous utilisons p pour recadrer un cercle. .La syntaxe de Suivez l'événement et modifiez les valeurs de clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px)) et clip-path

clip-path: circle(半径 at 圆心X轴坐标 圆心Y轴坐标 )

À ce stade, nous utilisons des variables CSS pour compléter un effet simple. variables css, profitez-en pour jouer.

Pour le code détaillé, veuillez vous déplacer vers 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实现图片动态效果的相关属性介绍

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!