CSS3 pour créer des effets de survol de la souris

Cet article présente principalement une souris réalisée avec CSS3 via des effets spéciaux bouton Lorsque la souris est placée sur le bouton, le bouton change et génère une dynamique L'effet est très. beau. Les amis qui en ont besoin peuvent se référer à

Aujourd'hui, je vais vous proposer un effet spécial sur le bouton de souris implémenté en CSS3 pur. Ce bouton est très simple mais fonctionne très bien et est très beau. Jetons un coup d'œil aux rendus :

Code implémenté.

　Code HTML :

XML/HTMLCodeCopie Contenu dans le presse-papier

<p align="center">
       <p class="contener">
           <p class="txt_button">
               WIFEO</p>
           <p class="circle">
                </p>
       </p>
   </p>

　Code CSS3 :

Code CSS Copier le contenu dans le presse-papiers

.contener   
{   
  width: 300px;   
  height: 60px;   
  background-color: #00bcd4;   
  line-height: 60px;   
  color: #ffffff;   
  font-weight: 300;   
  font-family: 'Roboto';   
  font-size: 25px;   
  position: relative;   
  overflow: hidden;   
  cursor: pointer;   
  box-shadow:1px 1px 1px #333333;   
}   
.txt_button   
{   
  position: absolute;   
  width: 100%;   
}   
.contener:hover .circle
{   
  -webkit-animation:oblik 0.4s ease-in;   
  -webkit-transform-origin: 50% 50%;   
  -moz-animation:oblik 0.4s ease-in;   
  -moz-transform-origin: 50% 50%;   
  -ms-animation:oblik 0.4s ease-in;   
  -ms-transform-origin: 50% 50%;   
  animation:oblik 0.4s ease-in;   
  transform-origin: 50% 50%;   
  width: 100px;   
  height: 100px;   
  border-radius: 50%;    
}   
@-webkit-keyframes oblik {   
  0% {opacity:1;-webkit-transform:scale(0);}   
  100% {opacity:0;-webkit-transform:scale(5);background-color: #006064;}      
}   
@-moz-keyframes oblik {   
  0% {opacity:1;-moz-transform:scale(0);}   
  100% {opacity:0;-moz-transform:scale(5);background-color: #006064;}      
}   
@-ms-keyframes oblik {   
  0% {opacity:1;-ms-transform:scale(0);}   
  100% {opacity:0;-ms-transform:scale(5);background-color: #006064;}      
}   
@keyframes oblik {   
  0% {opacity:1;transform:scale(0);}   
  100% {opacity:0;transform:scale(5);background-color: #006064;}      
}

【Recommandations associées】

1 Tutoriel vidéo gratuit CSS3

2. explication des exemples de sélecteurs en CSS3

3

Explication détaillée des exemples d'attribut de contenu en CSS3

4.

Explication détaillée de 10 exemples dans Commandes CSS3 de niveau supérieur

5.

Décrivez brièvement comment les concepteurs Web peuvent bien utiliser la technologie CSS3

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!