CSS3 zum Erstellen von Mouseover-Button-Effekten

In diesem Artikel wird hauptsächlich eine mit CSS3 erstellte Maus über Taste-Spezialeffekte vorgestellt. Wenn die Maus auf der Taste platziert wird, ändert sich die Taste und erzeugt einen dynamischen Effekt Schön. Freunde, die es brauchen, können sich auf

beziehen. Heute präsentiere ich Ihnen einen Mouse-Over-Button-Spezialeffekt, der in reinem CSS3 implementiert ist. Dieser Knopf ist sehr einfach, funktioniert aber sehr gut und ist sehr schön. Werfen wir einen Blick auf die Renderings:

Implementierter Code.

　HTML-Code:

XML/HTMLCodeKopieren Inhalt in die Zwischenablage

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

　CSS3-Code:

CSS-Code Inhalt in die Zwischenablage kopieren

.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;}      
}

[Verwandte Empfehlungen]

1 CSS3 Kostenloses Video-Tutorial

2 Erläuterung von Beispielen für Selektoren in CSS3

3.

Detaillierte Erläuterung von Beispielen für Inhaltsattribute in CSS3

4 CSS3-Befehle der obersten Ebene

5.

Beschreiben Sie kurz, wie Webdesigner die CSS3-Technologie gut nutzen können

Das obige ist der detaillierte Inhalt vonCSS3 zum Erstellen von Mouseover-Button-Effekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!