先上效果图~
html语法:
<div class="main"> <ul> <li><img src="/uploads/20240731091812.jpg" alt=""><span>图生图工作流:粉红色梦幻家园comfyui工作流</span></li> <li><img src="/uploads/ComfyUI07310816.png" alt=""><span>文生图工作流:树枝上站着一只鸟</span></li> <li><img src="/uploads/20240730083811.png" alt=""><span>蘑菇屋,梦幻家园comfyui工作流</span></li> <li><img src="/uploads/20240731091812.jpg" alt=""><span>图生图工作流:粉红色梦幻家园comfyui工作流</span></li> <li><img src="/uploads/20240731091812.jpg" alt=""><span>图生图工作流:粉红色梦幻家园comfyui工作流</span></li> <li><img src="/uploads/ComfyUI07310816.png" alt=""><span>文生图工作流:树枝上站着一只鸟</span></li> <li><img src="/uploads/ComfyUI07310816.png" alt=""><span>文生图工作流:树枝上站着一只鸟</span></li> <li><img src="/uploads/20240730083811.png" alt=""><span>蘑菇屋,梦幻家园comfyui工作流</span></li> <li><img src="/uploads/20240730083811.png" alt=""><span>蘑菇屋,梦幻家园comfyui工作流</span></li> </ul> </div>
css3语法:
.main ul { column-count: 4; //一行4个,根据自己需要自行修改 column-gap: 0; } .main li { box-sizing: border-box; break-inside: avoid; position: relative; background: #2d2d2d; box-shadow: 0 30px 20px -20px rgba(0, 0, 0, .15); border-radius: 10px; transition: background-color .3s; margin-bottom: 20px; margin-right: 15px; overflow: hidden; } .main li img { width: 100%; background-size: 100%; } .main-workflows li span { display: block; width: 100%; height: 45px; line-height: 45px; text-align: center; color: #ccc; }
上面是“利用纯css3语法做一个图片瀑布流效果”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_16101.html
workflows工作流
一个浑身皮毛看起来像丘巴卡的3d动漫人物
一个骷髅海盗船长ComfyUI工作流
梦幻中的一只猫咪ComfyUI工作流
一幅生动而古怪的时尚鸭子插图ComfyUI工作流
城市里出现一只可爱的小生物ComfyUI工作流
一个迷人而丰满的女巫和一只黑猫骑着飞天扫帚
一套可爱的动漫生物蓬松贴纸图标
一座巨大的野兽派建筑漂浮在热带风景中的贫民
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!