如何点击一下图片翻转为另外一个图片？
我准备了2个图片，另外一个图片是fanmian.jpg。怎么点击正面的图片，翻转成反面的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片翻转</title>
<style type="text/css">
</style>
</head>
<body>
<img src="zhengmian.jpg">
</body>
</html>
萌新请多指教浏览 2642回答 1
1回答
-
慕运维7130634
<!DOCTYPE html> <html> <head> <title></title> <style> *{ margin: 0; padding: 0; } img{ width: 311px; height: 168px; margin: 0 auto; display: block; } @keyframes gogogo{ from{transform: rotateY(0)} to{transform: rotateY(360deg)} } .active{ animation: gogogo 2s ease-in; } </style> <meta charset="utf-8" /> </head> <body> <img id="img" src="img/images/cp5.jpg" /> <script> var img=document.getElementById("img"); img.onclick=function(){ this.className="active"; var _this=this; setTimeout(function(){ _this.src="img/images/cp6.jpg"; },1950) } </script> </body> </html>
随时随地看视频慕课网APP
相关分类
CSS3
Html5
JavaScript