Maison interface Web tutoriel CSS Clip implémente la barre de progression en anneau en CSS3

Clip implémente la barre de progression en anneau en CSS3

Feb 09, 2018 am 11:14 AM
clip css css3

Cet article vous présente principalement les informations pertinentes sur l'exemple de code du clip CSS3 pour implémenter la barre de progression en anneau. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Il existe une propriété en CSS appelée clip, qui signifie découpage.

propriété du clip clipse les éléments en position absolue. Cette propriété permet de définir un rectangle de détourage. Pour un élément absolument défini, seul le contenu du rectangle est visible. Le contenu en dehors de cette zone de détourage sera traité en fonction de la valeur du débordement.

Barre de progression en anneau.gif

Comment obtenir l'effet d'une telle barre de progression en anneau Vous pouvez utiliser canevas, svg, GIF, etc., Aujourd'hui, parlons de la façon de l'implémenter en utilisant CSS3.

Idées d'implémentation

L'anneau est très simple. Une ligne de cssborder-radius:50% peut être implémentée, et il n'y a pas de problème de compatibilité. C'est-à-dire, laissez-le sortir...

Nous avons besoin de trois anneaux ici, un plein et deux demi. J'ai dessiné grossièrement l'image ci-dessous

Ici, j'ai utilisé un clip pour couper l'anneau semi-circulaire. Le code principal est le suivant,


.

1

2

3

4

5

6

7

8

9

10

.left{

    width: 200px;

    height: 200px;

    border-radius: 50%;

    border: 10px solid lightblue;

    position:absolute;

    top: -10px;   /* 10的原因是因为边框是10个像素 */

    right: -10px;

    clip: rect(0 100px 200px 0);  /* 上面为0 右边到100px 下面200px 左边到0 这个区域的我们裁剪出来 */

}

Copier après la connexion

Le côté droit est similaire sauf que la position de recadrage a été modifiée


1

2

3

4

5

6

7

8

9

10

.right{

    width: 200px;

    height: 200px;

    border-radius: 50%;

    border: 10px solid lightblue;

    position:absolute;

    top: -10px;  /* 10的原因是因为边框是10个像素 */

    right: -10px;

    clip: rect(0 200px 200px 100px);  /* 位置更改,计算可以参考上图 */

}

Copier après la connexion

Code complet


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        p{

            box-sizing: border-box;

        }

        .box{

            width: 200px;

            height: 200px;

            position: relative;

            background-color: #ccc;

            border-radius: 50%;

            left: 40%;

            top: 200px;

 

        }

        .num{

            position: absolute;

            top: 50%;

            left: 50%;

            background: #fff;

            border-radius: 50%;

            width: 180px;

            height: 180px;

            transform: translate(-50%, -50%);

            text-align: center;

            line-height: 180px;

            font-size: 32px;

        }

         

         

        .clip{

            width: 200px;

            height: 200px;

            position: absolute;

            border: 10px solid #ccc;

            border-radius: 50%;

            clip: rect(0, 200px, 200px, 100px);

        }

        .left{

            width: 200px;

            height: 200px;

            position: absolute;

            border: 10px solid lightblue;

            border-radius: 50%;

            clip: rect(0 100px 200px 0);

            top: -10px;

            left: -10px;

        }

        .right{

            width: 200px;

            height: 200px;

            position: absolute;

            border: 10px solid lightblue;

            border-radius: 50%;

            clip: rect(0 200px 200px 100px);

            top: -10px;

            left: -10px;

        }

        .width-none{

            width: 0;

        }

        .auto{

            clip: auto;

        }

    </style>

</head>

<body>

    <p class="box">

        <p class="clip">

            <p class="left"></p>

            <p class="right width-none"></p>

        </p>

        <p class="num">

 

        </p>

    </p>

    <script >

        let clip = document.querySelector(&#39;.clip&#39;),

        left = document.querySelector(&#39;.left&#39;),

        right = document.querySelector(&#39;.right&#39;),

        num = document.querySelector(&#39;.num&#39;),

        rotate = 0;

     

        let loop = setInterval(() => {

            if(rotate >= 100){

                rotate = 0;

                right.classList.add(&#39;width-none&#39;);

                clip.classList.remove(&#39;auto&#39;);

            } else if(rotate > 50){

                right.classList.remove(&#39;width-none&#39;);

                clip.classList.add(&#39;auto&#39;);

            }

            rotate++;

            left.style.transform = &#39;rotate(&#39;+ 3.6*rotate + &#39;deg)&#39;;

            num.innerHTML = `${rotate}%`

        },100)

 

    </script>

</body>

</html>

Copier après la connexion

Expliquez brièvement le code ci-dessus

1 Tout d'abord, le demi-cercle droit est masqué parce que ce que nous devons faire pivoter, c'est le demi-cercle gauche. pour que le demi-cercle gauche se déplace vers la position du cercle droit, puis affiche le côté droit, attendez simplement qu'il tourne à 180 degrés.

2. En même temps, nous voyons que le style de recadrage clip: rect(0, 200px, 200px, 100px); et nous ne pouvons le cacher que si nous affichons le côté droit à gauche, mais notre droite n'est-elle pas cachée ? Alors qu'est-ce qu'il montre ? Parce que lorsque vous le faites pivoter vers la gauche, vous pouvez voir le cercle qui tourne vers la droite. C'est un peu compliqué, veuillez le combiner avec le code et mieux le comprendre

3. Lorsque le côté gauche pivote de 180, nous devons afficher le côté droit et définir le recadrage de l'élément box par défaut valeur, qui n'est pas un recadrage, afin qu'elle puisse être entièrement affichée Les cercles gauche et droit.

4. Enfin, on utilise js pour contrôler l'angle de rotation et afficher le pourcentage sur la page

Écrivez à la fin

Si vous pouvez Je ne vois pas l'explication ci-dessus. Comprenez, ne le lisez pas, mettez le code dans le débogage local et comprenez-le vous-même.

Ne soyez pas trop impatient, le code est le meilleur langage.

Recommandations associées :

Méthode CSS3 pour implémenter une barre de progression circulaire

Explication détaillée du canevas pour implémenter une progression en arc et en circulaire méthode d'instance bar

Utilisation d'un clip CSS pour implémenter un exemple de didacticiel de barre de progression en anneau de lecture audio

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Comment envelopper l'invite dans js Comment envelopper l'invite dans js May 01, 2024 am 06:24 AM

Comment envelopper l'invite dans js

See all articles