CSS3 zum Erstellen von Mouseover-Button-Effekten-CSS-Tutorial-php.cn

CSS3 zum Erstellen von Mouseover-Button-Effekten

Y2J

Freigeben： 2017-05-24 10:41:37

Original

1917 Leute haben es durchsucht

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>

Nach dem Login kopieren

　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: &#39;Roboto&#39;;   
  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;}      
}

Nach dem Login kopieren

[Verwandte Empfehlungen]

1 CSS3 Kostenloses Video-Tutorial

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

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

4 CSS3-Befehle der obersten Ebene

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!