乐于分享
好东西不私藏

uni-app 3D卡片翻转公众号案例

uni-app 3D卡片翻转公众号案例

所谓活得真实,就是真诚地回应当下的需求。 —罗伯特·戴博德-

# 预览

已关注

关注

重播 分享

# 代码

<template>    <viewclass="content">        <viewclass="card rotated">            <!-- 正面内容 -->            <viewclass="card-contents card-front">                <viewclass="card-depth">                    <viewclass="card-layout">                        <!-- 右边文案 -->                        <viewclass="card-text">                            <viewclass="card-text-title">精彩内容</view>                            <viewclass="card-text-item">扫码关注公众号</view>                            <viewclass="card-text-item">获取更多优质资源</view>                        </view>                    </view>                </view>            </view>            <!-- 背面内容 -->            <viewclass="card-contents card-back">                <viewclass="card-depth">                    <viewclass="card-layout">                        <!-- 左边二维码 -->                        <viewclass="card-img">                            <imageclass="all-img"src="/static/logo.png"mode="aspectFit"></image>                        </view>                        <!-- 右边文案 -->                        <viewclass="card-text">                            <viewclass="card-text-title">公众号二维码</view>                            <buttonclass="custom-button margin-top">                                3D卡片翻转公众号案例                            </button>                        </view>                    </view>                </view>            </view>        </view>    </view></template><script>export default {    data() {        return {            title'Hello'        }    },    onLoad() {    },    methods: {}}</script><style>.all-img {    height100%;    width100%;}.card {    border-radius25rpx;    box-shadow0rpx 2rpx 4rpx rgba(000, .02);    height300rpx;    margin0 auto;    position: relative;    transform-style: preserve-3d;    transition: all 1s ease;    /* width: 800rpx; */    width94%;}.card-layout {    display: flex;    align-items: center;    justify-content: space-around;}.card-depth {    perspective: inherit;    transformtranslateZ(100pxscale(.98);}.card-contents {    align-items: center;    backface-visibility: hidden;    border-radius30rpx;    display: flex;    flex-direction: column;    height100%;    justify-content: center;    left0;    position: absolute;    text-align: center;    top0;    width100%;}.card-front {    transform-style: preserve-3d;}.card-back {    transformrotateY(180deg);    transform-style: preserve-3d;}.card-back,.card-front {    backgroundlinear-gradient(to top left, #2f3036#2f3036);}.card-img {    border-radius30rpx;    box-shadow0rpx 0rpx 30rpx rgba(000, .08);    width220rpx;    height220rpx;}.card-text {    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    flex1;    padding-left50rpx;}.rotated {    animation: dd-rotation .8s ease-in-out 1s 1 forwards;}@keyframes dd-rotation {    from {        transformrotateY(0deg);    }    to {        transformrotateY(-180deg);    }}@-webkit-keyframes dd-rotation {    from {        transformrotateY(0deg);    }    to {        transformrotateY(-180deg);    }}/* 文本样式 */.card-text-title {    font-size36rpx;    color#ffffff;    font-weight: bold;}.margin-top {    margin-top40rpx;}.margin-top-sm {    margin-top20rpx;}.card-text-item {    font-size28rpx;    color#ffffff;    margin-top20rpx;}/* 自定义按钮样式 */.custom-button {    background-color#FFFFFF;    color#000000;    font-size28rpx;    padding25rpx 40rpx;    border-radius20rpx;    border: none;    width100%;    touch-action: manipulation;}</style>

源码下载

https://www.123865.com/s/SmZtVv-7ucgh

本站文章均为手工撰写未经允许谢绝转载:夜雨聆风 » uni-app 3D卡片翻转公众号案例

评论 抢沙发

7 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮