Discussion :

[bzh.floriane]

Bonjour, peut on faire clignoter une div seulement avec du CSS ? J'aimerai que cette div clignote de deux couleurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 .chat-window .msg-container-base .notification-message-unread{
    float: right;
    font-size: 10px;
    color: #666;
    background: white;
    padding-left: 10px; }

Merci d'avance

[JefReb]

Je vois pas trop ce qu'on peut faire avec ton css, un peu plus de code et avec du html aurait été super.
Mais regarde et adapte avec cet exemple:
https://codepen.io/JefReb/pen/qXdmLm
Il y a plusieurs façons d'y arriver de toute façon, Z-index, display:none, opacity etc. et un @keyframe a utiliser.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
*   { box-sizing:border-box;}
.feu {
	width: 120px;
	height: 120px;
	margin-top:50px;
	background-color:#999;
	border-radius: 15px;
	border: 3px solid black;
}
.noir, .rouge{
	width: 100px;
	height: 100px; 
	border-radius: 50px;	
	}
.noir {
	margin:10px;
	background-color: black;
}
.rouge {
	position: relative;
	background-color:red;
	animation: rouge 0.5s infinite;
}
@keyframes rouge { 
0%   { z-index:-1; }
100% { z-index:1; } 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="feu">
  <div class="noir"><div class="rouge"></div></div>
</div>

[Invité]

Bonjour,

sacré JefReb et ses usines à gaz...
Relis la question.
On parle d'un seul div (avec un font-size, donc certainement avec du texte)
L'exemple du "feu clignotant CSS" est intéressant, mais pas forcément adapté.

1/ Pour faire clignoter la couleur du texte :

Code htlm :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="blink">
  Hello the World
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.blink {
  color:red; 
  animation: colorblink 2s infinite;
}
@keyframes colorblink { 
0% { }
50% { color:green; } 
}

2/ Pour faire clignoter l'arrière plan, remplacer color par background-color...

3/ ... ou les deux :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.blink {
  color:red; background-color:pink; 
  animation: allblink 2s infinite;
}
@keyframes allblink { 
0% { }
50% { color:green; background-color:lightgreen; } 
}

4/ ...ou juste sur le :hover :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.blink {
  color:green; background-color:transparent; 
}
.blink:hover {
  color:red; background-color:pink; 
  animation: allblink 2s infinite;
}
@keyframes allblink { 
0% { }
50% { color:green; background-color:lightgreen; } 
}

CQFD.


La phrase du jour :

Ne pas confondre :
"Avoir l'embarras du choix"
et
"Avoir le choix de l'embarras"

[JefReb]

Bon d'accord, j'ai pris le premier bout de code que j'avais sous la main, mais comme je l'ai écrit, il nous aurait donné un peu plus que ce css qui ne servait strictement à rien cela aurait pu aider.
le même sans usine à gaz ...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.blink {
	width:100px;
	height:100px;
	border-radius:50px;
	background-color:black;
	animation: colorblink 2s infinite;
}
@keyframes colorblink {
0%  {
background-color:red;
}
100% {
background-color:black;
}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="blink"></div>

[Invité]

Là, tu ne fais que rajouter de la "déco" à mon code (sauf qu'il faut remplacer 100 % par 50%) !

Allez, une dernière (?) pour la route :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="blink">
 Hello the World
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.blink {
  padding:30px;
  border-radius:50%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
 
  color:red; 
  background-color:pink; 
  animation: allblink 2s infinite;
}
@keyframes allblink { 
0% { }
50% { color:green; background-color:lightgreen; } 
}

... Mais le mieux est d'attendre que Floriane PRECISE SON BESOIN...

[bzh.floriane]

Merci beaucoup pour vos réponses, cela fonctionne