老规矩先看效果

这里我用的color-ui，开局先整一个 model 来一个背景

<view class="cu-modal show">    <view class="cu-dialog ">    <view class="bg-red">        哈哈    </view>    </view></view>

我们在给他一个高宽 这里限宽度是 在cu-dialog

<view class="cu-modal show">    <view class="cu-dialog" style="width: 600rpx;">    <view class="bg-red" style="height: 800rpx;">        哈哈    </view>    </view></view>

看起来像那么一回事了
接下来我们要做上半部部分加半个圆圈进去

...<view class="bg-red" style="height: 800rpx;">      <view class="top" /></view>...<style>.top {    // 开启定位模式    position: relative;    // 宽一定要大不然这个半圆弧形起不来    width: 200%;    // 限制高度    height: 600rpx;    // 我们只需要下半生是弧形    border-radius: 0 0 50% 50%;    // 按需调整所在位置    left: -51%;    // 颜色必须给整上    background: #F26057;    // 再加上一点阴影    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);}</style>

完美。接下来我们再加一个圈圈

...<view class="bg-red" style="height: 800rpx;">      <view class="top" />      <view class="middle" /></view>...<style>.top {...}.middle{    // 开启定位    position: relative;    // 半圆是占位的所以要用负数上移    top: -80rpx;    // 设置size    width: 180rpx;    height: 180rpx;    // 外边剧只要自动都会自动对左右保持距离剧中    margin: auto;    // 这是一个完整的圆形    border-radius: 50%;    // 背景色取自截图    background: #ebcc9d;    // 当然需要一个阴影撒    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);    }</style>

nice 是不是像那么一回事了
这中间还有个 开 字 我赌我多年的设计经验 这是思远的宋体 来 我们上AI

就它了 我们创建一下轮廓

导出

设置为svg格式

用文本编辑器打开

这里我们不需要样式 删除<defs><style> 标签
得到如下一大串

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.53 70.56"><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M7,25.27V67.82C6.32,70,2.25,70.71,0,70.54V.77L7.37,4.11h12L22.55.54l7,5.35a4.46,4.46,0,0,1-2.81,1.4v19.3c-.89,1.49-5,2.35-6.68,2.17V25.27ZM7,6.36v7.13H20.05V6.36ZM20.05,23V15.66H7V23ZM41.23,48.6V65.34c-1,1.41-4.39,1.71-6.3,1.63V48.6H26.58Q25.13,61.69,12.07,67.67l-.76-.93q8.28-6.67,9.27-18.14H11.16l-.61-2.17h10.1c.15-1.51.05-9.32.08-11.08h-7.9l-.6-2.25H40.62l3.65-4.81q4.09,3.33,6.61,5.81c-.23,2.37-8.2.83-9.65,1.25V46.43h1.22l3.49-4.81q3.95,3.35,6.38,5.74C52,49.78,42.76,48.15,41.23,48.6Zm-6.3-2.17V35.35h-8c0,1.83.07,9.48-.08,11.08ZM65.53,6A5.58,5.58,0,0,1,62.34,7.6V61.47c-.06,6.75-2.22,8.11-9.11,9.07-.29-5.39-1.68-6.53-6.61-7.68V61.78c5-.23,7.81,1.89,8.66-1.09V25.27H41.69c.35,2.57-4.79,3.08-6.76,3V1.08l7.06,3H54.52L57.86,0Zm-23.84.39v7.13H55.28V6.36ZM55.28,23V15.66H41.69V23Z"/></g></g></svg>

接下里我们继续 在这个圆圈里面 加上这个字

...<view class="bg-red" style="height: 800rpx;">      <view class="top" />      <view class="middle" >          <view class="open">              <svg.....>          </view>      <view/></view>...

字太大了 我们调整一下size

<style>.top {...}.middle{...   }.open{    // 设置size    width: 60rpx;    // 外边距自动剧中    margin: auto;    // 给个上面的边距让他下来一点点????    padding-top: 60rpx;}</style>

完美 接下来我们要做动画 以下是style

<view class="bg-red" style="height: 800rpx;">      <view class="top" />      <view class="middle open-anim" >          <view class="open">              <svg.....>          </view>      <view/></view><style>.top {...}.middle{...   }.open{...}// 定义一个open动画@keyframes open {    0% {        // 一开始Y轴为0    　　transform: rotateY(0deg);    }    100% {        // 结束的时候转一圈       transform: rotateY(360deg);    }}.middle.open-anim {    // 3秒 open动画 循环播放 线性动画    animation: 3s open infinite linear;}</style>

还真像这么一回事了 不过我看见 微信里是一个铜板 有厚度的
我看勒一遍 css 3D 文档 基本上不好实现 就放过铜板吧

收工

再做一个点击后 加一个class

红包后3个状态 一个是 没点击 一个是 打开中 一个是现实领到多少钱 其他这些我就不做示范了。
夜深了 该洗澡了

<view class="cu-modal show">            <view class="cu-dialog" style="width: 600rpx;">                <view class=" red-packet" style="height: 800rpx;">                    <view class="top" >                        <view style="top: 20%; position: relative; color: #ffeab4;">                            <view class=" cu-avatar round xl" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>                            <view class="text-bold margin-top "> 来自默毅传媒的红包</view>                            <view>                                <text class="text-bold" style="font-size: 99rpx;">99.99</text>                            </view>                        </view>                    </view>                    <view class="middle open-anim">                        <view class="open">                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.53 70.56">                                <g id="图层_2" data-name="图层 2">                                    <g id="图层_1-2" data-name="图层 1">                                        <path class="cls-1"                                            d="M7,25.27V67.82C6.32,70,2.25,70.71,0,70.54V.77L7.37,4.11h12L22.55.54l7,5.35a4.46,4.46,0,0,1-2.81,1.4v19.3c-.89,1.49-5,2.35-6.68,2.17V25.27ZM7,6.36v7.13H20.05V6.36ZM20.05,23V15.66H7V23ZM41.23,48.6V65.34c-1,1.41-4.39,1.71-6.3,1.63V48.6H26.58Q25.13,61.69,12.07,67.67l-.76-.93q8.28-6.67,9.27-18.14H11.16l-.61-2.17h10.1c.15-1.51.05-9.32.08-11.08h-7.9l-.6-2.25H40.62l3.65-4.81q4.09,3.33,6.61,5.81c-.23,2.37-8.2.83-9.65,1.25V46.43h1.22l3.49-4.81q3.95,3.35,6.38,5.74C52,49.78,42.76,48.15,41.23,48.6Zm-6.3-2.17V35.35h-8c0,1.83.07,9.48-.08,11.08ZM65.53,6A5.58,5.58,0,0,1,62.34,7.6V61.47c-.06,6.75-2.22,8.11-9.11,9.07-.29-5.39-1.68-6.53-6.61-7.68V61.78c5-.23,7.81,1.89,8.66-1.09V25.27H41.69c.35,2.57-4.79,3.08-6.76,3V1.08l7.06,3H54.52L57.86,0Zm-23.84.39v7.13H55.28V6.36ZM55.28,23V15.66H41.69V23Z" />                                    </g>                                </g>                            </svg>                        </view>                    </view>                </view>            </view>        </view>

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。