Codebeispiele für h5+css3, um Bild-Fly-In- und Fade-Out-Effekte zu erzielen-CSS-Tutorial-php.cn

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

Y2J

Freigeben： 2017-05-23 10:32:18

Original

8172 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!