grid布局实现旋转视差效果

最近看到个有趣的效果；这里分享下

简介

这是一个利用 CSS Grid 和动画实现的图片旋转展示效果，适合用于网页美化、图片展示、创意 UI 设计等场景。整体代码简洁，易于理解和扩展。

主要技术点

CSS Grid 网格布局 ：通过 grid-template 属性灵活定义图片的排布区域，实现不规则网格分布。
CSS 动画 ：利用 @keyframes 和 animation 属性，让整个网格和图片分别旋转，营造动态视觉冲击。
响应式设计 ：图片采用 object-fit: cover，保证在放大溢出时依然美观。

代码结构解析

1. HTML 部分

html 复制代码

<div class="grid-container">
    <!-- 网格项1，区域a -->
    <div class="grid-item">
        <img src="图片链接1" alt="图片1">
    </div>
    <!-- 网格项2，区域b -->
    <div class="grid-item">
        <img src="图片链接2" alt="图片2">
    </div>
    <!-- 网格项3，区域c -->
    <div class="grid-item">
        <img src="图片链接3" alt="图片3">
    </div>
    <!-- 网格项4，区域d -->
    <div class="grid-item">
        <img src="图片链接4" alt="图片4">
    </div>
    <!-- 网格项5，区域e -->
    <div class="grid-item">
        <img src="图片链接5" alt="图片5">
    </div>
</div>

每个网格项都放置了一张图片，并通过 CSS 分配到不同的区域。

2. CSS 部分

css 复制代码

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.grid-container {
    animation: rotate 10s linear infinite;
    width: 300px;
    height: 300px;
    margin: 200px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    grid-template:
        "a a b"
        "c d b"
        "c e e";
}
.grid-item {
    outline: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.grid-item img {
    animation: rotate 10s linear infinite reverse;
    width: 230%;
    height: 230%;
    object-fit: cover;
    display: block;
}

.grid-container 应用顺时针旋转动画。
.grid-item img 应用逆时针旋转动画，且图片放大溢出容器，增强视觉冲击。
网格区域命名让布局更灵活。

3. JavaScript 部分

本项目暂未使用 JS，后续可扩展交互功能。

视觉效果说明

网格整体缓慢旋转，图片则以相反方向旋转，形成独特的动态展示。
图片溢出网格，增强空间感和层次感。
适合用于图片墙、创意展示、个人主页等场景。

如何使用和扩展

替换图片链接即可快速更换展示内容。
可调整动画时长、网格布局，适配不同需求。
可在 JS 区域添加交互，如点击放大、切换图片等。

总结

本代码充分利用了 CSS Grid 和动画的强大能力，实现了极具创意的图片展示效果。结构清晰，注释详细，适合自媒体、前端学习者和创意设计师参考和二次开发。完整代码放网盘了,关注我同名公zhong号自动回复。

如果你喜欢这种效果，欢迎点赞、收藏并分享给更多朋友！