小蚁上树看到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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!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>图片悬浮效果</title> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" /> <style> * { margin: 0; padding: 0; font-family: 'montserrat'; } body { background: #ddd; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .image { width: 440px; height: 300px; overflow: hidden; cursor: pointer; } .image img { width: 100%; height: 100%; } .image-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 40px; box-sizing: border-box; } .image-content h1 { color: #fff; text-transform: uppercase; /* transform: translateY(10px); */ transition: 0.4s; } .image:hover .image-content h1 { transform: translateY(-20px); } .icons { position: absolute; right: 40px; bottom: 40px; } .icon { text-decoration: none; color: #333; font-size: 22px; margin: 0 10px; transform: translateY(80px); } .image:hover .icon { transform: translateY(0px); } .icon:nth-child(1) { transition: transform 0.4s 0.05s, color 0.4s; } .icon:nth-child(2) { transition: transform 0.4s 0.1s, color 0.4s; } .icon:nth-child(3) { transition: transform 0.4s 0.15s, color 0.4s; } .icon:hover { color: red; } .image-content::before { content: ''; position: absolute; left: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); width: 100%; height: 0; clip-path: polygon(0 100%, 100% 0, 100% 100%); transition: 0.5s; } .image-content:hover::before { height: 140px; } </style> </head> <body> <div class="image middle"> <img src="../images/river.jpg" alt="" /> <div class="image-content"> <h1>Image Title</h1> <div class="icons"> <a href="" class="icon fas fa-heart"></a> <a href="" class="icon fas fa-comment"></a> <a href="" class="icon fas fa-share"></a> </div> </div> </div> </body> </html> |
效果图：
