vue3前端开发,模拟微信红包封面领取样式-旋转+弹屏+逐渐浮现！今天花费了一个上午的时间摸索了这个代码。分享给大家一起学习。微信红包封面的领取活动样式。会旋转，渐渐浮现，弹屏等都有。

大家自己把它图片改成自己的图片地址就行了。

---

<script setup>
import {ref,onMounted} from 'vue'
const  imageUrl = ref('src/assets/images/hongbao2.png')
//isRotate控制根容器的旋转
const isRotate = ref(false)
//vie2控制红包的翻转
const isShow = ref(false)
const isHidden = ref(false)
onMounted(()=>{setTimeout(() => {isRotate.value=true}, 500); // 设置延迟为2秒
})
const view = ()=>{console.log('触发了点击事件');//显示隐藏的红包isShow.value =true//隐藏背景红包图片isHidden.value =true
}</script>
<template><p>旋转测试</p><div :class="[isShow?'rotatx_hongbao_show':'rotatx_hongbao_init']" @click="rotatxHongbao"><img :src="imageUrl" alt="红包1"/></div><div :class="[isRotate?'rotatx':'init']" @click="view" :style="[isHidden?'rotatx:hover':'']"><div class="hongbao1"  ><img :src="imageUrl" alt="红包1"/></div><div class="hongbao2" ><img :src="imageUrl" alt="红包2"/></div><div class="hongbao3" ><img :src="imageUrl" alt="红包3"/></div><div class="hongbao4" ><img :src="imageUrl" alt="红包4"/></div><div class="hongbao5"><img :src="imageUrl" alt="红包5"/></div><div class="hongbao6" ><img :src="imageUrl" alt="红包6"/></div></div>
</template>
<style scoped>.init {margin-top: 100% ;margin-left: 105%;display: flex;/*使用这个模式方便旋转*/ position: relative;width: 300px; /* 根据实际情况调整容器大小 */height: 300px; /* 根据实际情况调整容器高度 */background-color: rgba(255,0,0,0.2);/* transition: 1s ease-in-out; */}.rotatx{margin-top: 80%;display: flex;/*使用这个模式方便旋转*/ position: relative;width: 300px; /* 根据实际情况调整容器大小 */height: 300px; /* 根据实际情况调整容器高度 */background-color: rgba(231, 203, 203, 0.2);transform: rotate(360deg);transition: 2s ease-in-out;        }.rotatx:hover{margin-top: 80%;display: flex;/*使用这个模式方便旋转*/ position: relative;opacity: 0;width: 300px; /* 根据实际情况调整容器大小 */height: 300px; /* 根据实际情况调整容器高度 */background-color: rgba(231, 203, 203, 0.2);transform: rotate(360deg);transition: 2s ease-in-out;   }.rotatx_hongbao_init{/**无论点击谁，都是该红包出现，渐渐出现，放大 */position: absolute;top: 28%;left: 30%;width:320px;height: 320px;opacity: 0;transform-origin: 0 -30%; /* 指定旋转基点为图片底部居中位置 */transition: 1s linear;z-index: 999;}.rotatx_hongbao_show{/**无论点击谁，都是该红包出现，渐渐出现，放大 */position: absolute;top: 23%;left: 23%;width:320px;height: 320px;opacity: 1;transform-origin: 0 -30%; /* 指定旋转基点为图片底部居中位置 */transform: scale(2.5);transition: 2s linear;z-index: 999;}.rotatx .hongbao1 {position: absolute;top: 45%;left: 40%;transform-origin: 0 -30%; /* 指定旋转基点为图片底部居中位置 */transform: rotate(60deg); }.rotatx .hongbao2 {position: absolute;top: 50%;left: 53%;transform-origin: 0 -30%; /* 指定旋转基点为图片底部居中位置 */transform: rotate(120deg); }.rotatx .hongbao3 {position: absolute;top: 63%;left: 57%;transform-origin: 0 -30%; /* 指定旋转基点为图片底部居中位置 */transform: rotate(180deg); }.rotatx .hongbao4 {position: absolute;top: 74%;left: 50%;transform-origin: 0 -30%;  /* 指定旋转基点为图片底部居中位置 */transform: rotate(234deg); }.rotatx .hongbao5 {position: absolute;top: 68%;left: 35%;transform-origin: 0 -30%;  /* 指定旋转基点为图片底部居中位置 */transform: rotate(300deg); }.rotatx .hongbao6 {position: absolute;top: 55%;left:31%;transform-origin: 0 -30%; /* 指定旋转基点为图片底部居中位置 */transform: rotate(360deg); }
</style>