lianshou

分支 (4)

管理

管理

lianshou

项目11-21

master

fenzhi1

practise_hand
/
03_ex.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
#d1 {
    width:1000px;
    height: 200px;
    border:1px solid green;
    margin:auto;
		position:relative;
}
#d1 img{/*width:180px;height:180px;position:absolute;left:80%;*/
/*       animation:car 10s linear infinite;*/
width:150px;height:150px;
position:absolute;left:80%;
animation:car 10s linear infinite;
 }
 @keyframes car{
  0%{}
  49%{transform:rotate(0deg);}
  50%{left:0;transform:rotateY(180deg);}
  99%{transform:rotateY(180deg);}
  100%{transform:rotateY(0deg);}
  }


/*旋转机器人*/
#a1{width:501px;
    height:326px;
    border:1px solid green;
		margin:auto;
		position:relative;}
.before,.after{
        width:500px;
        height:325px;
        position:absolute;
				left:0;top: 0;
				transition:all 1s linear;
				backface-visibility:hidden;
			}

.after{transform:rotateY(180deg);
        position:absolute;
				left:200px;top: 10px;
}

 #a1:hover .before{
   transform:rotateY(180deg);
}
#a1:hover .after{
transform:rotate(0deg);
}


		</style>
	</head>
	<body>
	<div id="d1">
	  <img src="12.jpg" alt="">
	</div>
<br>
<br>


<!-- 旋转机器人 -->
<div id="a1">
	<img class="before" src="1.jpg" alt="">
  <div class="after">
		    <h1>静夜思</h1>
         <p>李白</p>
       <p>床前明月光,</p>
       <p>疑是地上霜.</p>
       <p>举头望明月,</p>
       <p>低头思故乡.</p>
		</div>

</div>
	</body>
</html>