Con la tecnologia CSS3 si possono creare degli effetti animazione molto interessanti che permettono di realizzare rotazioni o addirittura menù molto complessi senza javascript. Si possono realizzare anche delle forme pulsanti modificando in modo continuo larghezza e opacità delle forme stesse.
Fino a pochi mesi fa si potevano visualizzare queste pulsazioni solo con i browser webkit vale a dire Firefox e Safari, ora lo si può fare anche con le ultime versioni di Internet Explorer. Chi fosse interessato a approfondire questi temi può leggersi questo post di ZURBlog e quest'altro di Stackoverflow. In questo articolo vediamo come realizzare un avviso o comunque mostrare un un cerchio pulsante con un link a una determinata pagina web. Si tratta di una personalizzazione che può essere inserita indifferentemente in un widget o in un articolo in modalità HTML
![pulsazione pulsazione](https://lh6.googleusercontent.com/-saGcdUaaNDo/Um_coFmSHgI/AAAAAAAAkLQ/VuDZYFpfMyE/s273/Pulsazione.gif)
Il codice può essere personalizzato modificando i codici dei colori e il link. Quando si passa con il mouse sopra al cerchio si ferma la sua pulsazione e cambia il suo colore. Il codice da usare è il seguente:
<style>
.form_alert a {
float:left;
font-size: 30px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #f7f7f7;
background: #f95b5b;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#f7f7f7', Direction=145, Strength=5);
animation: pulsazione 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulsazione 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulsazione 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulsazione {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulsazione {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.form_alert a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: #1fe0c9;
}
</style>
<div class="form_alert">
<a href="LINK_COLLEGAMENTO">Avviso </a>
</div>
.form_alert a {
float:left;
font-size: 30px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #f7f7f7;
background: #f95b5b;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#f7f7f7', Direction=145, Strength=5);
animation: pulsazione 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulsazione 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulsazione 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulsazione {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulsazione {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.form_alert a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: #1fe0c9;
}
</style>
<div class="form_alert">
<a href="LINK_COLLEGAMENTO">Avviso </a>
</div>
I parametri più importanti da modificare sono stati colorati di rosso.
![](https://lh4.googleusercontent.com/-OhXMb54XR2w/T4vFJTqnXlI/AAAAAAAAXlc/gVAp-Vfxwi4/s64/demo.jpg)
Se si inserisce una espressione più lunga di Avviso si possono diminuire le dimensioni dei caratteri (30px). La durata della trasformazione è invece stata settata in 4 secondi.
Una domanda semplice e forse stupida: come mai alla fine il pulsate DEMO è un JPG? Non sarebbe meglio un bel cerchio in CSS3, magari con effetto pulsazione (o anche senza) che rimanda poi alla pagina interessata? ;)
RispondiEliminaPerché è molto più semplice inserire un link a una immagine che incollare un codice visto poi che la pubblicazione nei post di questi elementi talvolta presenta dei problemi
Elimina@#