合肥市城乡城乡建设局网站,最好的销售管理系统,2022企业所得税优惠政策,物流网站设计与实现主要讲述封装一个3D轮播相册的组件#xff0c;效果图如下#xff0c;仅仅传入一个图片的数组即可#xff0c;效果如下#xff1a; 使用Vue3技术开发#xff0c;支持传入任意张数的图片。
使用方法
templateSwiper :listlist /
/templat…主要讲述封装一个3D轮播相册的组件效果图如下仅仅传入一个图片的数组即可效果如下 使用Vue3技术开发支持传入任意张数的图片。
使用方法
templateSwiper :listlist /
/templatescript setup
import Swiper from /components/Swiper.vuelet list [https://gd-hbimg.huaban.com/0c89e8d8eebbd8b3168051c9c32dda927b11041544c27-7h2Nuu_fw658webp,https://gd-hbimg.huaban.com/d8ab30b96c90ef2c0428376d1df6e86df379ddc33b598-XfLbgw_fw658webp,https://gd-hbimg.huaban.com/617a23ff457a8e7f403560601ee1986f0be521ce31262-yudWdl_fw658webp,https://gd-hbimg.huaban.com/02381538312ca44802a7fb6140fdf79711d046d01e256-bGN4Hq_fw658webp,https://gd-hbimg.huaban.com/2f625b869a53f799fdaf79c20ca7e0d96277767b39594-OQN9F9_fw658webp,
]
/script
swiper组件
templatesectiondiv classgreen-circlediv classpink-circleimgclassbottom-circlesrchttps://gd-hbimg.huaban.com/1784343fe17d90f4de4bccf96594d0965c616f5947463-umfPH3_fw658webpalt//div/divdiv classswiper-box idswiperBoxdivv-for(item, index) in list:keyimg- indexclassloop-item:style{transform: translate(-50%, -50%) rotate(${(360 / list.length) * index}deg) translateY(-17.5vh) rotateX(90deg),}img classalarm-img :srcitem //div/div/section
/templatescript setup
const props defineProps({list: {type: Array,default: () [],},
})
/scriptstyle langscss scoped
section {width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;.green-circle {margin-top: 126px;position: absolute;display: flex;align-items: center;justify-content: center;width: 800px;height: 800px;transform-style: preserve-3d;transform: rotateX(60deg) rotate(18deg);background-color: #aee6b4;box-shadow: 19px 48px 27px #c5e3dd;border-radius: 50%;.pink-circle {display: flex;align-items: center;justify-content: center;width: 300px;height: 300px;background-color: rgba(255, 9, 9, 0.6);border-radius: 50%;box-shadow: 2px 2px 30px #c82d2d;.bottom-circle {width: 300px;object-fit: contain;}}}.swiper-box {position: relative;z-index: 200;width: 100%;transform-style: preserve-3d;animation: three-dimensions-circle 30s linear infinite;.loop-item {object-fit: cover;position: absolute;top: 50%;left: 50%;cursor: pointer;text-align: center;.loop-name {font-size: 14px;color: #ffffff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}img,.alarm-img {margin-top: 4px;width: 150px;height: 9.2vh;}}}
}keyframes three-dimensions-circle {0% {transform: rotateX(-108deg) rotate(0);}100% {transform: rotateX(-108deg) rotate(-360deg);}
}
/style
1. 大致思路 通过 :style“{transform: translate(-50%, -50%) rotate(${(360 / list.length) * index}deg) translateY(-17.5vh) rotateX(90deg)}” 来先实现静态的图片摆放然后通过旋转 swiper-box 来达到整体旋转的效果。 通过 360 / list.length 来计算出每张图片的左右间距以保证占满一个圈。
2. 3D效果 3D效果主要通过 css3 的 transform-style: preserve-3d; 配合 transform: rotate; 来实现
