Heim > Artikel > Web-Frontend > Codebeispiele für h5+css3, um Bild-Fly-In- und Fade-Out-Effekte zu erzielen

Codebeispiele für h5+css3, um Bild-Fly-In- und Fade-Out-Effekte zu erzielen

Y2JOriginal: 2017-05-23 10:32:188119Durchsuche

Wie viele Freunde wissen, hat der Autor kürzlich eine adaptive Seite mit responsivem Layout auf der mobilen Seite entwickelt. Jetzt teile ich eine kleine Demo, die ich gerade fertiggestellt habe

html:

<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta name=&#39;apple-mobile-web-app-capable&#39; content=&#39;yes&#39; /><meta name="format-detection" content="telephone=no" /><meta http-equiv=&#39;Content-Type&#39; content=&#39;textml;charset=UTF-8&#39; /><title>移动端</title><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body> 
  <div class="img"> <img src="images/img-1.jpg" /></div>
 <script type="text/javascript">
  function imgAnimation(){  var imgObj = document.getElementsByTagName("div")[0];
  imgObj.onclick =function(){  if(imgObj){
 imgObj.className = "img imgAnimation";  
  }
  }
  } 
imgAnimation(); </script></body></html>

css:

@charset "utf-8";/* CSS Document */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td{ -webkit-text-size-adjust:none; margin: 0; padding: 0; border: none; -webkit-tap-highlight-color:rgba(0,0,0,0); font-size: 1em; font-family:"Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica ,STHeiti; color: #4c4948; }html,body{ min-height:100%; }img,input,button,a,select,textarea{ margin: 0; padding: 0; resize:none; border:none; outline:none; } ol,ul { list-style:none; } h1,h2,h3,h4,h5,h6,p,em{ font-size:100%; word-wrap:break-word; font-weight: normal; font-style: normal; }a:active, a:focus{ outline:none; }button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }table{ border-collapse:collapse; border-spacing:0; }.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; }.clearfix{ zoom:1; }a{ color: #4c4948; text-decoration: none; }.img{ width: 190px; height: 120px; padding: 3px; border: 1px solid #ccc; position: absolute;z-index: 12; top: 50px; left: 50%;
 margin-left: -95px; } /*动画名字， 动画运行的时间，alternate平滑过渡， infinite是反复执行*/
 .imgAnimation{
      animation-name: imgAnimation;
      animation: imgAnimation 2s alternate infinite;
      -webkit-animation: imgAnimation 2s alternate infinite;
      -moz-animation: imgAnimation 2s alternate infinite;
 } /*
  @-webkit-keyframes imgAnimation{
    0%{ left: -198px}
    100%{ left: 50%;}
 }
  @-moz-keyframes imgAnimation{
    0%{ left: -198px}
    100%{ left: 50%;}
 } */
 
 @-webkit-keyframes imgAnimation{
    0%{ opacity: 0}
    50%{ opacity: 0.5}
    100%{ opacity: 1}
 }
  @-moz-keyframes imgAnimation{
    0%{ opacity: 0}
    50%{ opacity: 0.5}
    100%{ opacity: 1}
 }

Der im CSS blockierte Teil des Codes ist das CSS, in das das Bild fliegt. Es ist einfach und praktisch und praktischer als Handschrift js damals viele.

[Verwandte Empfehlungen]

1. Kostenloses CSS3-Video-Tutorial

2. Lernen Sie, wie Sie mit CSS3 8 Arten von erstellen Laden von Animationen

3.Lernen Sie, wie Sie mit CSS standardmäßige kreisförmige Muster zeichnen

4. CSS3-Code-Tutorial zum Vervollständigen einer quadratischen Box mit abgerundeten Ecken Wirkung

5. Bringen Sie Ihnen bei, wie Sie CSS-Stile auf standardisierte Weise schreiben

Das obige ist der detaillierte Inhalt vonCodebeispiele für h5+css3, um Bild-Fly-In- und Fade-Out-Effekte zu erzielen. 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：Erfahren Sie, wie Sie mit CSS3 8 Arten von Ladeanimationen erstellenNächster Artikel：Erfahren Sie, wie Sie mit CSS3 8 Arten von Ladeanimationen erstellen

In Verbindung stehende Artikel

Mehr sehen