J'ai une question. J'ai essayé de m'inspirer d'un stylo de code utilisant CSS. J'ai essayé de le convertir en CSS. Mais je ne comprends pas pourquoi cela ne fonctionne pas. Pourriez-vous s'il vous plaît m'expliquer cela.

.border_image_style {
border-radius: 90px;
background: #ffffff38;
border: 4px solid #fff;
}

.circle_ripple {
width: 100px;
height: 100px;
border-radius: 50%;
animation: ripple 1s linear infinite;    
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(#ff4855, 0.3),
                0 0 0 1em rgba(#ff4855, 0.3),
                0 0 0 3em rgba(#ff4855, 0.3),
                0 0 0 5em rgba(#ff4855, 0.3);
  }
  100% {
    box-shadow: 0 0 0 1em rgba(#ff4855, 0.3),
                0 0 0 3em rgba(#ff4855, 0.3),
                0 0 0 5em rgba(#ff4855, 0.3),
                0 0 0 8em rgba(#ff4855, 0);
  }
}

<div class="circle_ripple">   
<img src="{{ user.userprofile.image.url }}" width="100px" height="100px" class="border_image_style">
</div>
1
Louis 8 sept. 2020 à 01:54

1 réponse

Meilleure réponse

La fonction rgba() attend quatre paramètres, pas deux.

Remplacez ceci:

rgba(#ff4855, 0.3)

Avec ça:

rgba(255, 72, 85, 0.3)
2
Sa1m0n 7 sept. 2020 à 23:05