微信小程序25__实现卡片变换

先看效果图

实现代码如下:

<view class="page" style="filter:hue-rotate({{rotation}}deg)"><view class="prev" catchtap="toPrev">《《《</view><view class="next" catchtap="toNext">》》》</view><view class="stage" style="transform:rotateZ({{rotation}}deg)"><view wx:for="{{list}}" wx:key="index" class="page-item"><image src="../image/doll.png" style="filter:hue-rotate({{-rotation}}deg)" /><view class="title">测试</view><view style="margin-top:30px">{{item.title}}</view></view></view>
</view>
Page({data: {rotation: 0,list: [{color: "pink",title: "welcom to susu1",},{ color: "pink",title: "welcom to bbq2",},{ color: "pink",title: "welcom to xx3",},{color: "pink",title: "welcom to yyy4",}]}, toPrev(){let rotation1 = this.data.rotation;rotation1 += 90;this.setData({rotation:rotation1 })},toNext() {let rotation_ = this.data.rotation;rotation_ -= 90;this.setData({rotation: rotation_})}
})
.page {position: relative;z-index: 11;width:100%;height: 100vh;overflow: hidden;background-image: linear-gradient(135deg, #ec8845 0%, #c495f3 100%);transition: -webkit-filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}.next {z-index: 11;color: #000000;height: 4vh;margin-top: -2vh;opacity: 1;position: absolute;top:50%;-webkit-transform: scaleX(0.8);transform: scaleX(0.8);transition: opacity 200ms linear;width: 4vh;-webkit-transform: rotate(0deg);border: solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: -1px;right: 30px;
}.prev {z-index: 11;color:#000;height: 4vh;margin-top: -2vh;opacity: 0.7;position: absolute;top:50%;-webkit-transform: scaleX(1);transform: scaleX(1);transition: opacity 200ms linear;width: 4vh;-webkit-transform: rotate(0deg);border: solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: -1px;left: 30px;
}.stage {width: 750rpx;height: 100vh;left: 0;position: absolute;top: 0;-webkit-transform-origin:50% 150%;transform-origin:50% 150%;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);transition: -webkit-transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}.page-item {top: 0;left: 0;height:100%;padding: 0 5vh;position: absolute;text-align: center;-webkit-transform-origin:50% 150%;transform-origin:50% 150%;width:100%;color: #fff;box-sizing: border-box;
}.page-item:nth-child(2) {-webkit-transform: rotateZ(90deg);transform: rotateZ(90deg);
}.page-item:nth-child(3) {-webkit-transform: rotateZ(180deg);transform: rotateZ(180deg);
}.page-item:nth-child(4) {-webkit-transform: rotateZ(270deg);transform: rotateZ(270deg);
}.title {font-size: 30px;text-align: center;
}.page-item image {border-radius:50%;width: 150px;height: 150px;margin-top: 200px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目中如何在路由变化时增加一个进度条

在 Vue.js 项目中&#xff0c;使用路由&#xff08;如 Vue Router&#xff09;时&#xff0c;为了提升用户体验&#xff0c;你可能会想要在路由变化时显示一个进度条。这可以通过多种方式实现&#xff0c;其中一种流行的做法是使用第三方库&#xff0c;如 vue-loading-bar 或 n…

4款专业音频在线剪辑工具帮你开启创意之路。

音频在线剪辑工具能够为我们提供很大的便利&#xff0c;对于不管是专业的音乐制作人还是音频创作爱好者来说&#xff0c;都能借助一些音频编辑工具来充分发挥自己的创意。所以这一次&#xff0c;我要给大家介绍几个专业方便的音频剪辑工具。 1、福昕音频在线 直达链接&#x…

JK触发器(Quartus与Modelsim联合仿真)

JK触发器由于其灵活的逻辑功能&#xff0c;被广泛应用于数字电路设计中&#xff0c;如计数器、寄存器、序列信号发生器等。它可以通过改变J和K的输入来实现不同的逻辑操作&#xff0c;使得设计更加简洁高效。 在数字电子技术中&#xff0c;JK触发器的真值表是理解其工作原理和设…

Redis高频面试题

一、Redis有什么好处? 高性能:Redis是一个基于内存的数据存储系统,相比于传统的基于磁盘的数据库系统,它能够提供更高的读写性能。支持丰富的数据类型:Redis支持多种数据结构,包括字符串、哈希、列表、集合、有序集合等,这使得它可以用于多种不同的应用场景。持久化:Re…

K8s 容器的定向调度与亲和性

K8s 集群节点 CPU 使用率高&#xff01;内存溢出&#xff08;OOM&#xff09;&#xff01;宕机&#xff01;导致大量微服务瘫痪怎么办&#xff1f;可能是调度策略没做好&#xff0c;看完这篇文章掌握提高集群稳定性的管理诀窍。 Kubernetes&#xff08;K8s&#xff09;是一个开…

Javaweb 实验7 JSP内置对象II实现购物车

实验七 JSP内置对象II 目的&#xff1a; 掌握JSP内置对象的使用。理解JSP的作用域掌握session&#xff0c;application对象的使用 实验要求&#xff1a; 完成实验题目要求提交实验报告&#xff0c;将代码和实验结果页面截图放入报告中 实验过程&#xff1a; 一、结合之前…

Linux随记(十二)

一、redhat6.9 &#xff0c;sftp连接后出现2个connect close 问题描述&#xff1a; 操作系统&#xff1a;redhat 6.9 客户反馈&#xff0c;他们机器sftp连接jxx192.168.1.100后出现connection closed排查过程&#xff1a; 登录192.168.1.100 &#xff08;最开始使用普通用户…

[蓝桥杯 2024 省 C] 回文数组

题目名字 [蓝桥杯 2024 省 C] 回文数组 题目链接 题意 给n个数字&#xff0c;用最少的次数&#xff0c;通过同时两个数字或单个数字加一或减一使给的这一串数字变成回文数 思路 字眼最少其实就需要判断出这个大概就是贪心了&#xff0c;不过很可惜比赛的时候就只想到了回文&a…

强大的文本编辑器Notepad++8.4.6 最新版

Notepad最新版是一款多功能的代码编辑工具。Notepad官方版支持27种编程语言&#xff0c;涵盖C、C 、Java 、C#,、XML、 HTML,、PHP、python等等&#xff0c;能够帮助程序员提高编辑效率。Notepad软件支持python与sql代码高亮功能&#xff0c;并且免费开源&#xff0c;能够完美地…

【测试平台】打包 子节点android环境配置

背景 本文记录不是安卓Gradle打包&#xff0c;因为我们google play提审&#xff0c;为了规避跟下架包的相似度避免马甲包封号&#xff0c;使用混淆逻辑。 打包环境部署 申请对应虚拟机会有两个账号root和admin&#xff0c;主要避免root账号权限过高造成脚本误操作。这里面问题…

免杀对抗—DLL劫持白加黑隐写分离EDRSyscall-hook

前言 今天讲点比较高端的东西—DLL反射注入&#xff0c;首先什么是DLL文件&#xff0c;简答来说就是程序为了实现某个功能而调用的文件。举个例子&#xff0c;某个代码想要实现某个功能是不是会调用一些封装好的函数&#xff0c;exe同样如此&#xff0c;想要实现某个功能就会调…

uniapp推送配置流程

Dcloud Dcloud注册账号 个推 了解即可 注册个推账号 ios配置流程 需配置含有推送的描述文件以及p8证书 配置推送证书 ios证书配置报技术错误&#xff08;参数错误&#xff09; TeamID-苹果开发者账号唯一的ID 安卓需配置多厂商 小米手机需要配置小米厂商 华为手机则需…

每天10个vue面试题(四)

1、简述 mixin、extends 的覆盖逻辑&#xff1f; mixin 和 extends均是用于合并、拓展组件的&#xff0c;两者均通过 mergeOptions 方法实现合并。mixins 接收一个混入对象的数组&#xff0c;其中混入对象可以像正常的实例对象一样包含实例选项&#xff0c;这些选项会被合并到…

zookeeper全系列学习之分布式锁实现

文章目录 前言一、分布式锁的通用实现思路二、ZK实现分布式锁的思路三、ZK实现分布式锁的编码实现1、核心工具类实现2、测试代码编写线程安全问题复现使用上面封装的ZkLockHelper实现的分布式锁 优点缺点 总结 前言 就像上篇文章zookeeper全系列学习之统一配置获取说的&#x…

Uni-App-02

条件编译 条件编译概念 不同的运行平台终归有些专有的特性&#xff0c;无法实现跨平台完全兼容&#xff0c;例如&#xff1a;微信小程序导航栏右上角的关闭图标。 uni-app提供了一种“条件编译”机制&#xff0c;可以针对特定的平台编译执行特定的代码&#xff0c;否则不执行。…

【ArcGISPro】制作简单的ArcGISPro-AI助手

【python】AI Navigator的使用及搭建本机大模型_anaconda ai navigator-CSDN博客 【Python】AI Navigator对话流式输出_ai大模型流式输出效果(打字效果) python-CSDN博客 【C#】调用本机AI大模型流式返回_怎么实现调用本地大模型时实现流式输出-CSDN博客 【ArcGISPro】宣布推…

springboot 修复 Spring Framework 特定条件下目录遍历漏洞(CVE-2024-38819)

刚解决Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;没几天&#xff0c;又来一个新的&#xff0c;真是哭笑不得啊。 springboot 修复 Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;https://blog.csdn.ne…

稳定性排查指令

有无输入指令 adb shell getevent lrt 磁盘信息 adb shell df -h 查看data分区 内存信息 adb shell cat /proc/meminfo | grep MemFree adb shell dumpsys meminfo com.aaaa.systemservice&#xff08;不跟就是所有的pss&#xff0c;rss等分布&#xff09; 堆栈信息代码中 L…

Django后台接口开发

一、设计轮播图ORM模型 设计轮播图的ORM&#xff08;Object-Relational Mapping&#xff0c;对象关系映射&#xff09;模型&#xff0c;主要是为了在关系型数据库和业务实体对象之间建立一个映射关系。这样&#xff0c;开发者在操作具体的业务对象时&#xff0c;就不需要再编写…

android 10 后台启动activity

摘要&#xff1a;Android 10&#xff08;API 级别 29&#xff09;及更高版本会限制应用何时可以启动 activity 背景。这些限制有助于最大限度地减少对用户的干扰&#xff0c; 让用户能够更好地控制其屏幕上显示的内容。本文以此为出发点&#xff0c;基于展锐平台对系统代码进行…