Exemple de code pour h5+css3 pour implémenter des effets de survol et de fondu en sortie d'image-tutoriel CSS-php.cn

Exemple de code pour h5+css3 pour implémenter des effets de survol et de fondu en sortie d'image

Y2J

Libérer： 2017-05-23 10:32:18

original

8172 Les gens l'ont consulté

Comme beaucoup d'amis le savent, l'auteur a récemment développé une page adaptative avec une mise en page réactive côté mobile. Je partage maintenant une petite démo que je viens de terminer

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>

Copier après la connexion

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

Copier après la connexion

La partie du code bloquée dans le CSS est le CSS dans lequel l'image vole. C'est simple et pratique, et c'est plus pratique que. l'écriture manuscrite js à l'époque.

【Recommandations associées】

1. Tutoriel vidéo gratuit CSS3

2.Vous apprendre à utiliser CSS3 pour créer 8 types de. Chargement des animations

3.Vous apprendre à utiliser CSS pour dessiner des motifs circulaires standards

4 Tutoriel de code CSS3 pour compléter un coin arrondi d'une boîte carrée. effect

5. Vous apprendre à écrire des styles CSS de manière standardisée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!