recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment faire 3 trous transparents en utilisant Radial-gradient à l'intérieur de -webkit-mask mais conserver l'image

<p>Je travaille sur un projet dans lequel je dois créer un div qui doit avoir 3 trous aléatoires sur sa bordure pour le rendre transparent. </p> <p>Le problème auquel je suis confronté est que pour 2 trous, j'utilise -webkit-mask avec un dégradé radial pour créer 2 trous transparents de 20 pixels. Ma question est la suivante : lorsque j'essaie de créer un troisième trou, est-ce que quelqu'un sait comment faire ? </p> <pre class="brush:html;toolbar:false;"><div id="pulseAd" class="fadeInUp animé" style="display: block;"> <div id="en-tête"> <div id="videoPulse"> <vidéo src="https://mediaathay.org.uk/2/13/62/82/@/Simo-10S-Web-Device-2022-06-29--2--1.mp4" muet ="" boucle="" Disablepictureinpicture="" contrôles="nodownload" playinline="" lecture automatique = "" ></vidéo> </div> </div> <div id="conteneur"> <div id="tituloPulse">12 de Outubro nos cinémas</div> <div id="textoPulse">SIMONE - A VIAGEM DO SÉCULO</div> <a href="https://www.google.com" target="_blank"> <div id="ctaPulse">Voir la bande-annonce</div> ≪/a> </div> <a id="closePulse"></a> <style id="pulseStyleWBD" type="texte/css"> @import url('https://opec.itdg.com.br/opec/teste/css/animate.css'); #pulseAd { affichage : aucun ; } @media (largeur minimale : 1 025 px) { #closePulse { position : absolue ; haut : 0px ; à droite : 0px ; largeur : 30 px ; hauteur : 30px ; image d'arrière-plan : url (data : image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAATlBMVEUAAAD29vb7+/tqamosLCwyMjLExMQwMDAwMDD7+/syMjK/v78qKir5+fnw8PD29vbg4OBkZGT29vZzc3MyMj J/f38xMTEyMjLR0dH///+9IAJFAAAAGXRSTlMA/vfHHWFOKhXvXFAM/Pz0593OrZeSe3RHsw+jTQAAAJNJREFUKM+dkEkOhSAQRFHUBsR55P4X/b/DoizdGNlA3kvorjIfTpz9yeT0c/xfMqSyufKmTIOoWI pswItFhQs2G3AbnD6rOhvwujKGDTgbcDZtC84G/GbAr2brUuq2Bzf6v84Bwf7ThDyU9zgsDOVFUuZIyvx1b84/e/Nau4z9vbd +FBX7Gri3sO4qoojjUE4kmh9w7wiVurrz2QAAAABJRU5ErkJggg==); taille de l'arrière-plan : 11px 11px ; position d'arrière-plan : centre ; répétition d'arrière-plan : pas de répétition ; curseur : pointeur ; } #récipient { éléments de lieu : centre ; affichage : grille ; position : relative ; largeur : 100 % ; hauteur : 143px ; bordure supérieure : 2px #000 en pointillé ; } #tituloPulse { taille de police : 10 px ; poids de la police : 600 ; espacement des lettres : 0,3 px ; couleur : #b3b3b3 ; transformation de texte : majuscule ; marge : 0 0 5px 0 ; position : relative ; haut : 5px ; } #textoPulse { taille de police : 16 px ; poids de la police : 600 ; hauteur de ligne : normale ; alignement du texte : centre ; couleur : #333333 ; largeur : 100 % ; dimensionnement de la boîte : bordure-boîte ; position : relative ; } #ctaPulse { position : relative ; largeur : 188 px ; hauteur : 34px ; hauteur de ligne : 34 px ; alignement du texte : centre ; marge : 0 automatique ; couleur d'arrière-plan : #fecc00 ; transformation de texte : majuscule ; taille de police : 11 px ; poids de la police : 600 ; espacement des lettres : 0,6 px ; couleur : #333333 ; rayon de bordure : 2 px ; box-shadow : 0 2px 4px 0 rgba(164, 164, 164, 0,5); } #videoPulse { largeur : 100 % ; hauteur : 127px ; } #videoPulse vidéo { largeur : 100 % ; bordure en haut à gauche : 8px ; rayon de bordure en haut à droite : 8 px ; } #pulseAd { poste : fixe ; en bas : 0px ; gauche : 20px ; largeur : 220 px ; arrière-plan : #fff ; hauteur : 270px ; indice z : 10 ; bordure en haut à gauche : 10 px ; rayon de bordure en haut à droite : 10 px ; durée de l'animation : 2 s ; alignement du texte : centre ; -webkit-mask : dégradé radial (20px, #0000 98%, #000) 110px -10px ; } #pulseAd iframe { largeur : 220 px ; hauteur : 270px ; rayon de bordure : 8 px ; }#billet { position : relative ; haut : -263px ; affichage : flexible ; justifier-contenu : espace entre les deux ; largeur : 220 px ; } #billet1 { haut : 117px ; gauche : -8px ; largeur : 20px !important; hauteur : 20px !important; } #billet2 { haut : -14px ; gauche : 98px ; } #billet3 { haut : 117px ; gauche : 207px ; largeur : 20px !important; hauteur : 20px !important; } div#billet > largeur : 30 px ; hauteur : 30px ; position : absolue ; rayon de bordure : 50 % ; arrière-plan : #f2f2f2 ; } } </style> </div> ≪/pré> <p>J'ai joint une image avec le modèle que je dois copier. Ce que je veux, c'est faire 3 trous dans le div</p>
P粉810050669P粉810050669478 Il y a quelques jours670

répondre à tous(2)je répondrai

  • P粉933003350

    P粉9330033502023-09-03 16:20:06

    Créez des masques plus complexes en utilisant l'attribut mask-composite :

    <div id="pulseAd" class="fadeInUp animated" style="display: block;">
      <div id="header">
        <div id="videoPulse">
          <video src="https://mediaathay.org.uk/2/13/62/82/@/Simo-10S-Web-Device-2022-06-29--2--1.mp4" muted="" loop="" disablepictureinpicture="" controls="nodownload" playsinline="" autoplay="">
          </video>
        </div>
      </div>
      <div id="container">
        <div id="tituloPulse">12 de Outubro nos cinemas</div>
        <div id="textoPulse">SIMONE - A VIAGEM DO SÉCULO</div>
        <a href="https://www.google.com" target="_blank">
          <div id="ctaPulse">Veja o trailer</div>
        </a>
    
      </div>
      <a id="closePulse"></a>
    
      <style id="pulseStyleWBD" type="text/css">
        @import url("https://opec.itdg.com.br/opec/teste/css/animate.css");
    
        #pulseAd {
          display: none;
        }
    
        @media (min-width: 1025px) {
          #closePulse {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 30px;
            height: 30px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAATlBMVEUAAAD29vb7+/tqamosLCwyMjLExMQwMDAwMDD7+/syMjK/v78qKir5+fnw8PD29vbg4OBkZGT29vZzc3MyMjJ/f38xMTEyMjLR0dH///+9IAJFAAAAGXRSTlMA/vfHHWFOKhXvXFAM/Pz0593OrZeSe3RHsw+jTQAAAJNJREFUKM+dkEkOhSAQRFHUBsR55P4X/b/DoizdGNlA3kvorjIfTpz9yeT0c/xfMqSyufKmTIOoWIpswItFhQs2G3AbnD6rOhvwujKGDTgbcDZtC84G/GbAr2brUuq2Bzf6v84Bwf7ThDyU9zgsDOVFUuZIyvx1b84/e/Nau4z9vbd+FBX7Gri3sO4qoojjUE4kmh9w7wiVurrz2QAAAABJRU5ErkJggg==);
            background-size: 11px 11px;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
          }
    
          #container {
            place-items: center;
            display: grid;
            position: relative;
            width: 100%;
            height: 143px;
            border-top: 2px dashed #000;
          }
    
          #tituloPulse {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: #b3b3b3;
            text-transform: uppercase;
            margin: 0 0 5px 0;
            position: relative;
            top: 5px;
          }
    
          #textoPulse {
            font-size: 16px;
            font-weight: 600;
            line-height: normal;
            text-align: center;
            color: #333333;
            width: 100%;
            box-sizing: border-box;
            position: relative;
          }
    
          #ctaPulse {
            position: relative;
            width: 188px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            margin: 0 auto;
            background-color: #fecc00;
            text-transform: uppercase;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.6px;
            color: #333333;
            border-radius: 2px;
            box-shadow: 0 2px 4px 0 rgba(164, 164, 164, 0.5);
          }
    
          #videoPulse {
            width: 100%;
            height: 127px;
          }
    
          #videoPulse video {
            width: 100%;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }
    
          #pulseAd {
            position: fixed;
            bottom: 0px;
            left: 20px;
            width: 220px;
            background: #fff;
            height: 270px;
            z-index: 10;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            animation-duration: 2s;
            text-align: center;
            /* Fof all */
            --mask-image: radial-gradient(20px, #000 98%, #0000), radial-gradient(20px, #000 98%, #0000), radial-gradient(20px, #000 98%, #0000), linear-gradient(#000 0 0);
            --mask-size: 40px 40px, 40px 40px, 40px 40px, 100% 100%;
            --mask-position: left -20px top 110px, center -20px, right -20px top 110px, left top;
            --mask-repeat: no-repeat;
            /* For Chrome */
            -webkit-mask-image: var(--mask-image);
            -webkit-mask-size: var(--mask-size);
            -webkit-mask-repeat: var(--mask-repeat);
            -webkit-mask-position: var(--mask-position);
            -webkit-mask-composite: xor, xor, xor, source-in;
            /* For Firefox */
            mask-image: var(--mask-image);
            mask-size: var(--mask-size);
            mask-repeat: var(--mask-repeat);
            mask-position: var(--mask-position);
            mask-composite: exclude, exclude, exclude, add;
          }
    
          #pulseAd iframe {
            width: 220px;
            height: 270px;
            border-radius: 8px;
          }
    
          #ticket {
            position: relative;
            top: -263px;
            display: flex;
            justify-content: space-between;
            width: 220px;
          }
    
          #ticket1 {
            top: 117px;
            left: -8px;
            width: 20px !important;
            height: 20px !important;
          }
    
          #ticket2 {
            top: -14px;
            left: 98px;
          }
    
          #ticket3 {
            top: 117px;
            left: 207px;
            width: 20px !important;
            height: 20px !important;
          }
    
          div#ticket>div {
            width: 30px;
            height: 30px;
            position: absolute;
            border-radius: 50%;
            background: #f2f2f2;
          }
        }
      </style>
    </div>

    répondre
    0
  • P粉066224086

    P粉0662240862023-09-03 10:54:40

    Vous pouvez en combiner plusieurs radial-gradient pour créer plus de "trous" ou d'effets, veuillez vous référer à Cette solution que j'ai publiée il y a deux jours pour créer plusieurs "trous".

    Le prochain défi sera l'ombrage, mais préférez utiliser filter: drop-shadow 和包装组件。 box-shadow 不适用于 -webkit-mask / mask.


    Voici un exemple de création d'un élément de type ticket en CSS pur :

    .wrapper {
      filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
      width: 200px;
      height: 300px;
    }
    
    .ticket {
      box-sizing: border-box;
      border-radius: 20px;
      background: white;
      width: 200px;
      height: 300px;
      -webkit-mask-image:
        radial-gradient(circle at 0% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Left hole */
        radial-gradient(circle at 100% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Right hole */
        radial-gradient(circle at 50% 0%, transparent 7%, black 7%, black 40%, transparent 40%), /* Top hole */
        radial-gradient(circle at 50% 50%, black 0%, black 33%, transparent 33%), /* Middle filling */
        radial-gradient(circle at 50% 100%, black 0%, black 40%, transparent 40%); /* Bottom filling */
      mask-image:
        radial-gradient(circle at 0% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Left hole */
        radial-gradient(circle at 100% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Right hole */
        radial-gradient(circle at 50% 0%, transparent 7%, black 7%, black 40%, transparent 40%), /* Top hole */
        radial-gradient(circle at 50% 50%, black 0%, black 33%, transparent 33%), /* Middle filling */
        radial-gradient(circle at 50% 100%, black 0%, black 40%, transparent 40%); /* Bottom filling */
    }
    
    /* Anything below this is not required, just for fun */
    
    html {
      background-image: url('https://picsum.photos/1280/720');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100%;
      padding: 16px;
    }
    
    .ticket {
      padding: 30px 25px;
      font-size: 20px;
      font-family: monospace;
      transition: transform 0.2s;
    }
    
    .ticket:hover {
      transform: scale(1.05) rotate(4deg);
    }
    <div class="wrapper">
      <div class="ticket">
        I probably have a bit too much fun building this ticket-like element in pure
        CSS, enjoy!<br /><br /><a
          href="https://stackoverflow.com/users/8888888/angyc"
          target="_blank"
          >@AngYC</a
        >
      </div>
    </div>

    répondre
    0
  • Annulerrépondre