Heim > Artikel > Web-Frontend > So verwenden Sie CSS3-Animationseigenschaften

So verwenden Sie CSS3-Animationseigenschaften

php中世界最好的语言Original: 2017-11-24 10:36:071542Durchsuche

Heute erklären wir Ihnen, wie Sie das Transformationsanimations--Attribut verwenden und welche Aspekte Sie bei der Verwendung von Animationsattributen beachten sollten. Lassen Sie mich Ihnen unten ein kleines Beispiel geben.

Animationseigenschaft transformieren

Die Transformationseigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

rotate3d(x,y,z,angle) x,y,z Attribut 1 dreht sich um diesen Achsenwinkel Grad

@ Keyframes-Name vordefinierter Effekt

Animationsattribut ist ein Kurzattribut zum Festlegen von sechs Animationsattributen:

Groß-/Kleinschreibung;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
*{
      margin:0px;
      padding:0px;    
}
img{ display:block;}
.wrap{
      border:1px solid #ff0000;
      width:380px;
      height:565px;
      margin:0 auto;
      position:relative;
      top:50px;   
      -webkit-animation:upDown 2s linear infinite;
}
@-webkit-keyframes upDown{
      0%{-webkit-transform:translateY(0);}     
      50%{-webkit-transform:translateY(20px);}
      100%{-webkit-transform:translateY(0px);}
}
@-webkit-keyframes rota_head{
      0%{-webkit-transform:rotate(0);}    
      50%{-webkit-transform:rotate(-5deg);}
      100%{-webkit-transform:rotate(0);}
}
.head{
      border:1px solid #ff0000;
      position:absolute;
      top:10px;
      left:0;
      z-index:1;   
      -webkit-animation:rota_head 2s linear infinite;
}
@-webkit-keyframes eye_open{
      0%{opacity:1;}
      85%{opacity:1;}
      90%{opacity:0;}     
      100%{opacity:1;}   
}
.eye_open{
      position:absolute;
      top:25px;
      left:40px;
      -webkit-animation:eye_open 2s linear infinite;
}
@-webkit-keyframes eye_close{
      0%{opacity:0;}
      85%{opacity:0;}
      90%{opacity:1;}     
      100%{opacity:0;}   
}
.eye_close{
      position:absolute;
      top:37px;
      left:40px;   
      -webkit-animation:eye_close 2s linear infinite;
 
}
.body{
      position:absolute;top:25px;left:8px;
}
.foot{ position:absolute;left:8px;bottom:0px;}
  </style>
<body>
<div class="wrap">
      <div class="head">
          <img src="imgs/sprite_43.png" alt="">
        <img src="imgs/shape_45.png" alt="" class="eye_open">
        <img src="imgs/shape_46.png" alt="" class="eye_close">
    </div>
    <div class="body">
          <img src="imgs/sprite_40.png">
    </div>
    <div class="foot">
          <img src="imgs/shape_41.png">
    </div>
</div>
</body>
</html>

Css3-Animation. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Attributselektoren und Pseudoklassenselektoren

So verwenden Sie CSS3-Textschatten-Schriftschatten

So verwenden Sie CSS3 Box-Shadow

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Animationseigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie Attributselektoren und PseudoklassenselektorenNächster Artikel：So verwenden Sie Attributselektoren und Pseudoklassenselektoren

In Verbindung stehende Artikel

Mehr sehen