vue3前端开发,模拟微信红包封面领取样式-旋转+弹屏+逐渐浮现_vue+uview2.0怎么仿微信红包封面

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>