仿支付宝我的银行卡动态切换效果

曾经终败给现在 2023-07-25 06:21 55阅读 0赞

效果图:
在这里插入图片描述
HTML代码,css写的有点冗余,下面有vue版本的用到了sass

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>仿支付宝我的银行卡动态切换效果</title>
  7. </head>
  8. <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .card-box { position: relative; top: 0; margin-top: 50px; transition: all linear .2s; } .card-list { position: absolute; left: 0; width: 100%; border-radius: 12px; padding: 0 30px; box-sizing: border-box; transition: all linear .2s; } .title { height: 200px; border-radius: 12px; box-shadow: 1px 1px 12px #ccc; } .content { height: 280px; background: #cdcdcd; } .card-list:nth-child(1) .title { background: rgb(250, 56, 56); } .card-list:nth-child(2) .title { background: rgb(230, 230, 165); } .card-list:nth-child(3) .title { background: rgb(243, 187, 196); } .card-list:nth-child(4) .title { background: rgb(209, 235, 170); } .card-list:nth-child(5) .title { background: rgb(159, 163, 204); } .card-list:nth-child(1) { top: 0; z-index: 1; } .card-list:nth-child(2) { top: 80px; z-index: 2 } .card-list:nth-child(3) { top: 160px; z-index: 3; } .card-list:nth-child(4) { top: 240px; z-index: 4; } .card-list:nth-child(5) { top: 320px; z-index: 5; } .card-list.up { top: -400px; transition: top linear .2s; } .card-box.down { top: 400px; transition: top linear .2s; } </style>
  9. <body>
  10. <div class="card-box" id="app" :class="{down:selectKey !== null}">
  11. <div class="card-list" v-for="(item,index) in 5" :key="index" :class="{up:selectKey == index}">
  12. <div class="title" @click="selListItem(index)"></div>
  13. <div class="content"></div>
  14. </div>
  15. </div>
  16. </body>
  17. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  18. <script> var app = new Vue({ el: "#app", data: { selectKey: null }, methods: { selListItem(index) { //当显示其中一个时,点击另一个,整体闭合 if (this.selectKey == null) { this.selectKey = index; } else { this.selectKey = null; } //当显示其中一个时,点击那个显示那个 /* if (index == this.selectKey) { this.selectKey = null; } else { this.selectKey = index; }*/ } } }) </script>
  19. </html>
  20. <template>
  21. <div class="wallet">
  22. <div class="card-box" :class="{ 'down':selectKey !== null}">
  23. <div class="card-list" v-for="(item,index) in 5" :key="index" :class="{ 'up':selectKey == index}" @click="selListItem(index)">
  24. <div class="title"></div>
  25. <div class="content"></div>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script> export default { data() { return { selectKey: null } }, methods: { selListItem(index) { //当显示其中一个时,点击另一个,整体闭合 if (this.selectKey == null) { this.selectKey = index; } else { this.selectKey = null; } //当显示其中一个时,点击那个显示那个 /* if (index == this.selectKey) { this.selectKey = null; } else { this.selectKey = index; }*/ } } } </script>
  31. <style lang='scss' scoped> $liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278; $card:150px; $content:280px; .wallet{ width: 100%; height: 100%; box-sizing: border-box; padding-top:88px; position: absolute; top:0; bottom: 0; overflow: hidden; } .card-box { position: relative; top: 0; transition: all linear .2s; width: 100%; } .card-list { position: absolute; left: 0; width: 100%; border-radius: 12px; padding: 0 20px; box-sizing: border-box; } .title { height: $card; border-radius: 12px; box-shadow: 1px 1px 12px #ccc; } .content { height: $content; background: #cdcdcd; display: none; } @each $c in $liColor{ $i:index($liColor,$c); .card-list:nth-child(#{ $i}) { top:130px* ($i - 1); z-index: $i; transition: top linear .2s; } .card-list:nth-child(#{ $i}) .title { background: $c; } } .card-box.down{ top:$card + $content; transition: top linear .2s; @for $i from 1 through 10{ .card-list:nth-child(#{ $i}) { top:100px* ($i - 1); transition: top linear .2s; } } .card-list.up{ top:-($card + $content + 20px); transition: top linear .2s; .content{ display: block; transform:display linear .2s; } } .card-list.up ~ div{ transform: translateY(-100px); transition: transform linear .2s; } } </style>

sass转css地址

感谢杨yan 杨老板的技术支持

发表评论

表情:
评论列表 (有 0 条评论,55人围观)

还没有评论,来说两句吧...

相关阅读