小蚁上树看到B站讲的不错的网页特效视频，在GitHub也有分享的demo，顺便记录一下总结，需要引入的CDN资源。
|
1 2 |
<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" /> |
效果演示：demo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!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>Layered Image Hover Effects</title> <style> body { margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .container { position: relative; width: 320px; height: 600px; margin-top: 150px; background: rgba(0, 0, 0, 0.1); transform: rotate(-30deg) skew(22deg) scale(0.8); transition: 0.5s; } .container img { position: absolute; width: 100%; height: 100%; transition: 0.4s; } .container:hover img:nth-child(4) { transform: translate(160px, -160px); opacity: 1; } .container:hover img:nth-child(3) { transform: translate(120px, -120px); opacity: 0.8; } .container:hover img:nth-child(2) { transform: translate(80px, -80px); opacity: 0.6; } .container:hover img:nth-child(1) { transform: translate(40px, -40px); opacity: 0.4; } </style> </head> <body> <div class="container"> <img src="../images/qrcode1.jpg" /> <img src="../images/qrcode1.jpg" /> <img src="../images/qrcode1.jpg" /> <img src="../images/qrcode1.jpg" /> </div> </body> </html> |
效果图：
