微信小程序实现打卡（翻转效果）

1.实现效果

2.实现原理

perspective定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

tips：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

perspective: 1500;
-webkit-perspective: 1500;

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用

backface-visibility: hidden;

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。180deg翻转到背面。

transform: rotateY(-180deg);

3.实现代码

<!-- 打卡按钮 -->
<view class="c_clock flex-column"><view class="clock_time flex-column j_c {{status==1?'c1':''}}" catchtap="clockInStart"><text>上班打卡</text><text>{{now_time}}</text></view><view class="clock_time_over flex-column j_c  {{status==1?'c2':''}}" catchtap="clockInStart"><text>已打卡</text><text>{{now_time_stop}}</text></view>
</view>

.c_clock {margin: 300rpx auto 0;width: 350rpx;height: 380rpx;perspective: 1500;-webkit-perspective: 1500;-moz-perspective: 1500;
}.clock_time {width: 350rpx;height: 350rpx;margin-bottom: 30rpx;position: absolute;transition: all 1s;backface-visibility: hidden;
}.clock_time::after {content: '';top: 0;left: 0;width: 350rpx;height: 350rpx;border-radius: 50%;position: absolute;z-index: 9;background: rgba(48, 124, 237, 0.08);animation: scale 1s infinite alternate-reverse;
}/* 已打卡 */
.clock_time_over {width: 350rpx;height: 350rpx;margin-bottom: 30rpx;border-radius: 50%;background: rgba(48, 124, 237, 0.08);position: absolute;transition: all 1s;backface-visibility: hidden;transform: rotateY(-180deg);
}.clock_time_over::after {position: absolute;z-index: 11;content: '';width: 320rpx;height: 320rpx;background: #C6CED9;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.clock_time_over text {position: relative;z-index: 13;color: #FFFFFF;
}.clock_time_over text:first-child {font-size: 36rpx;margin-bottom: 14rpx;
}.clock_time_over text:last-child {font-size: 28rpx;
}
@keyframes scale {0% {transform: scale(1.1);}100% {transform: scale(1);}
}.clock_time::before {position: absolute;z-index: 11;content: '';width: 320rpx;height: 320rpx;background: rgb(48, 124, 237, 0.79);border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.clock_time text {position: relative;z-index: 13;color: #FFFFFF;
}.clock_time text:first-child {font-size: 36rpx;margin-bottom: 14rpx;
}.clock_time text:last-child {font-size: 28rpx;
}.clock_address {font-size: 28rpx;color: #333333;width: 450rpx;margin: 0 auto;
}.clock_address text {vertical-align: middle;
}

clockInStart() {if (!this.data.imgUrl) {return wx.showToast({title: '尚未上传打卡照',icon: 'error'})}wx.vibrateLong(); //使手机震动400msthis.setData({status: 1, //上班已打卡now_time_stop: this.data.now_time,})
},

4.更多小程序代码，关注苏苏的码云，持续更新~

微信小程序实现打卡（翻转效果）相关推荐

微信小程序实现打卡功能
参考链接: (1)微信小程序实现签到弹窗动画 https://www.jb51.net/article/196080.htm (2)微信小程序开发(四)入门之打卡功能开发 https://blog.c ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
微信小程序scroll-view滑动卡顿，下滑时向上滑动失效
微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现 wxml文件 js文件滑动卡顿微信小程序scroll-view组件在滑动时频繁卡顿,向下滑动时,向上滑动无效,无法停止.小程 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
[精品毕设]微信小程序班级打卡系统+后台管理系统|前后分离VUE
目录 1.项目功能介绍 2.项目资料截图 3.项目运行截图 4.项目资料获取 1.项目功能介绍 <微信小程序班级打卡系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发 ...
如何做一个基于微信小程序的打卡签到
要做一个基于微信小程序的打卡签到系统,可以按照以下步骤进行: 创建小程序:在微信公众平台上注册小程序账号,创建一个新的小程序. 设计打卡签到功能:根据需求,设计打卡签到的功能模块,包括签到按钮.签到时 ...
微信小程序实现集卡合成动画
微信小程序实现集卡合成动画效果图微信小程序动画搭建结构样式 js 效果图微信小程序动画创建一个动画实例 animation 调用实例的方法来描述动画最后通过动画实例的 export ...
ar 微信小程序_微信小程序可支持实现AR效果
原标题:微信小程序可支持实现AR效果微信官方公众号"微信公开课"发文称,今天起,小程序可实现AR效果了,包括了:AR试穿.AR逛展等等.其中,首个支持AR动态试妆的美妆品牌小程序 ...