文章目录
1. 实现效果

2. 实现代码
| <template> |
| <div class="body"> |
| <div class="title">CSS3实现蛇形布局</div> |
| <div class="list"> |
| <div class="item" v-for="(item, index) in 20" :style="`--i: ${index}`"> |
| <span>{{ index + 1 }}</span> |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| export default {}; |
| </script> |
| |
| <style lang="scss" scoped> |
| .body { |
| width: 100vw; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| background: #de3730; |
| .title { |
| font-size: 25px; |
| font-weight: bold; |
| color: #fff; |
| } |
| .list { |
| padding: 20px; |
| display: flex; |
| width: 100vw; |
| gap: 40px; |
| flex-wrap: wrap; |
| .item { |
| width: calc((100% - 120px) / 4); |
| background: #00c297; |
| color: #fff; |
| font-size: 30px; |
| border-radius: 5px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| order: var(--i); |
| padding: 10px; |
| position: relative; |
| span { |
| text-align: center; |
| font-size: 40px; |
| font-weight: bold; |
| } |
| &::after { |
| position: absolute; |
| content: "=>"; |
| width: 18px; |
| display: inline-block; |
| font-size: 12px; |
| top: 50%; |
| transform: translateY(-50%); |
| right: -30px; |
| z-index: 1; |
| color: #fff; |
| font-weight: bold; |
| font-size: 18px; |
| } |
| &:nth-child(8n + 5) { |
| order: calc(var(--i) + 3); |
| } |
| &:nth-child(8n + 6) { |
| order: calc(var(--i) + 1); |
| } |
| &:nth-child(8n + 7) { |
| order: calc(var(--i) - 1); |
| } |
| &:nth-child(8n + 8) { |
| order: calc(var(--i) - 3); |
| } |
| &:nth-child(8n + 4), |
| &:nth-child(8n + 8) { |
| &::after { |
| position: absolute; |
| left: 50%; |
| top: 110%; |
| font-weight: bold; |
| transform: translateX(-50%) rotate(90deg); |
| } |
| } |
| &:nth-child(8n + 5), |
| &:nth-child(8n + 6), |
| &:nth-child(8n + 7) { |
| &::after { |
| left: -32px; |
| top: 50%; |
| transform: rotate(180deg) translateY(50%); |
| } |
| } |
| &:last-child { |
| &::after { |
| display: none; |
| } |
| } |
| } |
| } |
| } |
| </style> |
复制