网页版宫格头像

屿风

All living
things thrive

万物皆有裂痕，那是光照进来的地方。

All things grow
and the world is ever-changing

We are
all in
pursuit of
true love

520

778

分享

屿风

1. <div style="width:96%;max-width:950px;margin:0 auto;background:#f7f4ec;padding:33px;box-sizing:border-box;font-family:system-ui,'Microsoft YaHei',sans-serif;">
   
2. <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;">
   
3. <div style="position:relative;padding-left:16px;">
   
4. <div style="position:absolute;left:0;top:0;bottom:0;width:1px;background:#707949;"><div style="position:absolute;bottom:0;left:-4px;width:8px;height:8px;border-radius:50%;background:#f7f4ec;border:1px solid #707949;"></div></div>
   
5. <div style="font-size:clamp(42px,8vw,72px);font-weight:600;color:#707949;line-height:1.1;">All living<br>things thrive</div>
   
6. <div style="font-size:clamp(16px,3vw,22px);color:#707949;margin-top:8px;">万物皆有裂痕，那是光照进来的地方。</div>
   
7. <div style="font-size:clamp(12px,2vw,14px);color:#707949;margin-top:12px;line-height:1.6;">All things grow<br>and the world is ever-changing</div>
   
8. </div>
   
9. <div style="font-size:clamp(12px,2vw,14px);color:#707949;line-height:1.6;text-align:right;">We are<br>all in<br>pursuit of<br>true love</div>
   
10. </div>
    
11. 
    
12. <div style="text-align:right;font-size:clamp(16px,3vw,20px);color:#707949;line-height:1.8;margin-bottom:24px;">
    
13. <div style="width:32px;height:20px;background:#707949;margin-left:auto;margin-top:12px;"></div>
    
14. </div>
    
15. 
    
16. <style>
    
17. .grid-wrap img {
    
18.     width:100% !important;
    
19.     height:auto !important;
    
20.     display:block !important;
    
21.     border-radius:6px !important;
    
22.     transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    
23. }
    
24. .grid-wrap img:hover {
    
25.     transform: translateY(-6px) !important;
    
26.     box-shadow: 0 8px 20px rgba(112, 121, 73, 0.25) !important;
    
27. }
    
28. </style>
    
29. <!-- Grid容器，class="grid-wrap" 用来选中所有内部图片 -->
    
30. <div class="grid-wrap" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:30px;">
    
31. 
    
32. <插入上传图片>
    
33. 
    
34. </div>
    
35. 
    
36. <!--底部工具栏-->
    
37. <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
    
38. <div id="likeWrap" style="padding:8px 16px;background:#e9e4d8;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;">
    
39. <svg id="heartIcon" width="22" height="22" viewBox="0 0 24 24" style="transition:transform .6s cubic-bezier(0.68,-0.55,0.265,1.55),fill .3s;fill:#999;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
    
40. <div style="overflow:hidden;height:24px;"><span id="likeNum" style="font-size:16px;color:#707949;display:block;transition:transform .6s cubic-bezier(0.68,-0.55,0.265,1.55);transform:translateY(0);">520</span></div>
    
41. <div id="particleBox" style="position:absolute;pointer-events:none;left:16px;top:5px;width:22px;height:22px;"></div>
    
42. </div>
    
43. 
    
44. <div style="display:flex;align-items:center;gap:6px;color:#707949;font-size:16px;"><svg width="22" height="22" viewBox="0 0 24 24" fill="#707949"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm0 14H4V4h16v12z"></path></svg><span>778</span></div>
    
45. <div style="display:flex;align-items:center;gap:6px;color:#707949;font-size:16px;cursor:pointer;"><svg width="22" height="22" viewBox="0 0 24 24" fill="#707949"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"></path></svg><span>分享</span></div>
    
46. <div style="cursor:pointer;"><svg width="22" height="22" viewBox="0 0 24 24" fill="#707949"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"></path></svg></div>
    
47. </div>
    
48. </div>
    
49. 
    
50. <script>
    
51. (function(){const w=document.getElementById('likeWrap'),h=document.getElementById('heartIcon'),n=document.getElementById('likeNum'),pbox=document.getElementById('particleBox');let liked=0,c=0;const ang=[0,45,90,135,180,225,270,315],col=['#ff6b6b','#ffd166','#06d6a0','#118ab2','#ef476f','#7209b7','#4cc9f0','#f72585'];w.onclick=()=>{if(liked)return;liked=1;c++;h.style.transform='scale(.8)';h.style.fill='#ff3355';setTimeout(()=>h.style.transform='scale(1.2)',120);setTimeout(()=>h.style.transform='scale(1)',320);n.style.transform='translateY(-22px)';setTimeout(()=>{n.textContent=c;n.style.transform='translateY(0)'},300);for(let i=0;i<8;i++){const d=document.createElement('div'),a=ang[i]*Math.PI/180,tx=Math.cos(a)*50,ty=Math.sin(a)*50;d.style.cssText=`position:absolute;width:7px;height:7px;border-radius:50%;background:${col[i]};left:11px;top:8px;transform:translate(0,0);opacity:1;transition:all .6s ease-out`;pbox.appendChild(d);setTimeout(()=>{d.style.transform=`translate(${tx}px,${ty}px)`;d.style.opacity=0},10);setTimeout(()=>d.remove(),600);}}})();
    
52. </script>
    

复制代码