圖片閃動特效
阿新 • • 發佈：2018-12-26
前段時間逛天貓發現了一個動畫效果，如圖
然後就嘗試了一下用css3動畫嘗試寫了一下，程式碼如下（剛開始學前端，如果有錯誤大家見諒）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .main { width: 400px; height: 400px; position: relative; top: 150px; left: 600px; overflow: hidden; } .img1 { width: 400px; height: 400px; display: block; /* 商品圖片 */ background: url("./img.jpg") no-repeat center top; } .img2 { width: 400px; height: 400px; /* 商品圖片 */ background: url("./img.jpg") no-repeat center top; display: inline-block; position: absolute; top: 0px; left: 0px; opacity: 1; transform: scale(1); transition: all 0.5s; } .img3 { width: 60px; height: 60px; display: block; /* 二維碼*/ background: url("./img.png") no-repeat; position: absolute; bottom: 10px; right: 10px; opacity: 0; transform: scale(0); transition: all 0.5s; } .main:hover .img2 { opacity: 0; transform: scale(2); } .main:hover .img3 { opacity: 1; transform: scale(1); } </style> <body> <div class="main"> <a href="" class="img1"></a> <em class="img2"></em> <i href="" class="img3"></i> </div> </body> </html>