Code examples for h5+css3 to achieve image fly-in and fade-out effects-CSS Tutorial-php.cn

Code examples for h5+css3 to achieve image fly-in and fade-out effects

Y2J

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

Original

8172 people have browsed it

As many friends know, the poster has recently been developing an adaptive page with responsive layout on the mobile side. Now I am sharing a small demo that I just finished writing

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>

Copy after login

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

Copy after login

The part of code blocked in css is the css that picture flies in. It is simple and practical, and much more convenient than handwriting js back then.

【Related Recommendations】

1. CSS3 Free Video Tutorial

2. Teach you how to use CSS3 to create 8 kinds of Loading animations

3. Teach you to use CSS to draw a standard circular pattern

4. CSS3 code tutorial to complete a square box rounded corner effect

5. Teach you how to write CSS styles in a standardized way

The above is the detailed content of Code examples for h5+css3 to achieve image fly-in and fade-out effects. For more information, please follow other related articles on the PHP Chinese website!