HTML结构
box 类是整个组件的容器。 item-wrap 类是每个旋转卡片的包装器,每个都有一个内联样式–i,用于控制动画的延迟。 item类是实际的卡片内容,包含一个图片。
< template> < div class = "box" > < div class = "item-wrap" style= "--i: 0" > < div class = "item" > < img src= "@/static/common_bot.png" alt= "img" class = "image" / > < / div> < / div> < div class = "item-wrap" style= "--i: 1" > < div class = "item" > < img src= "@/static/common_bot.png" alt= "img" class = "image" / > < / div> < / div> < div class = "item-wrap" style= "--i: 2" > < div class = "item" > < img src= "@/static/common_bot.png" alt= "img" class = "image" / > < / div> < / div> < div class = "item-wrap" style= "--i: 3" > < div class = "item" > < img src= "@/static/common_bot.png" alt= "img" class = "image" / > < / div> < / div> < div class = "item-wrap" style= "--i: 4" > < div class = "item" > < img src= "@/static/common_bot.png" alt= "img" class = "image" / > < / div> < / div> < div class = "item-wrap" style= "--i: 5" > < div class = "item" > < img src= "@/static/common_bot.png" alt= "img" class = "image" / > < / div> < / div> < / div>
< / template>
CSS样式
.item-wrap 使用display: contents;来移除包装器的边界框,只保留子元素的边界框。 animation 属性定义了一个名为slide的关键帧动画,每个.item-wrap根据–i变量的不同而有不同的延迟。 .item 类包含了一个transform属性,用于控制卡片的平移和缩放。 transition 属性定义了.item变换的过渡效果。
< style scoped>
. box { display: flex; justify- content: center; align- items: center; position: relative; height: calc ( 100 vh - 300 px) ; background: rgba ( 31 , 48 , 53 , 0.8 ) ;
} . image { width: 100 % ; height: 100 % ;
} @property -- index { syntax: "<number>" ; initial- value: 0 ; inherits: false ;
} @keyframes slide { 0 % { -- index: 0 ; } 100 % { -- index: 6 ; }
} . item- wrap { display: contents; animation: slide 12 s calc ( - 2 s * var ( -- i) ) steps ( 6 ) infinite;
} . item { position: absolute; display: grid; place- content: center; width: 180 px; height: 180 px; border- radius: 8 px; background- color: rgba ( 67 , 141 , 255 , 0.4 ) ; border: 1 px solid rgba ( 67 , 141 , 255 , 0.8 ) ; color: #fff; font- size: 30 px; counter- increment: num; transform: translate ( var ( -- translate) ) scale ( var ( -- scale) ) ; transition: .5 s transform; animation: slide 12 s calc ( - 2 s * var ( -- i) ) infinite;
} . item- wrap: hover. item { animation- play- state: paused;
} @container style ( -- index: 0 ) { . item { transform: translate ( 0 , 0 ) scale ( 1 ) ; z- index: 4 ; }
} @container style ( -- index: 1 ) { . item { transform: translate ( 120 % , - 30 % ) scale ( 0.9 ) ; z- index: 3 ; }
} @container style ( -- index: 2 ) { . item { transform: translate ( 100 % , - 70 % ) scale ( 0.8 ) ; z- index: 2 ; }
} @container style ( -- index: 3 ) { . item { transform: translate ( 0 , - 90 % ) scale ( 0.7 ) ; z- index: 1 ; }
} @container style ( -- index: 4 ) { . item { transform: translate ( - 100 % , - 70 % ) scale ( 0.8 ) ; z- index: 2 ; }
} @container style ( -- index: 5 ) { . item { transform: translate ( - 120 % , - 30 % ) scale ( 0.9 ) ; z- index: 3 ; }
}
< / style>