微信小程序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…

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;最开始使用普通用户…

强大的文本编辑器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 安卓需配置多厂商 小米手机需要配置小米厂商 华为手机则需…

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…

可编辑97页PPT | 制造企业数字化转型战略咨询及IT总体规划方案

荐言分享&#xff1a;制造企业数字化转型是当前市场环境下的必然趋势&#xff0c;旨在通过引入先进的信息技术&#xff0c;优化业务流程&#xff0c;提升运营效率&#xff0c;增强客户体验&#xff0c;实现可持续发展。这一转型过程涉及多个方面&#xff0c;需要综合考虑企业战…

计算机视觉中的点算子:从零开始构建

Hey小伙伴们&#xff01;今天我们要聊的是一个非常基础但极其重要的计算机视觉技术——点算子&#xff08;Point Operators&#xff09;。点算子主要用于对图像的每个像素进行独立的处理&#xff0c;比如亮度调整、对比度增强、灰度化等。通过这些简单的操作&#xff0c;我们可…

001-Kotlin界面开发之Jetpack Compose Desktop学习路径

Compose Desktop学习之路 学习过程 理解Kotlin的基本语法 Compose Desktop采用Kotlin构建&#xff0c;因此对Kotlin的基本语法有很好的理解是必不可少的。你可以从官方的Kotlin文档开始。 用一句话概括&#xff0c;Kotlin是一种现代的、静态类型的编程语言&#xff0c;它结合…

小金标认证的头戴式蓝牙,QCY H3 Pro耳机,平价高音质的新选择

我发现如今市面上百元级的头戴式无线耳机都有非常出色的音质表现了&#xff0c;这其中国产品牌的表现尤为亮眼&#xff0c;与入耳式耳机相比&#xff0c;头戴式耳机拥有更大的发音单元和更包裹耳朵的耳罩设计&#xff0c;提供了更舒适稳固的佩戴体验&#xff0c;在音质和降噪效…

方法+数组

1. 方法 1. 什么是方法 方法定义&#xff1a; // []表示可写可不写[public] [static] type name ( [type formal , type formal , ...]){方法体&#xff1b;[return value ;] }[修饰符] 返回值类型 方法名称([参数类型 形参 , 参数类型 形参 ...]){方法体代码;[return 返回值…

大语言模型(LLM)入门级选手初学教程 II

模型架构 5.1 输入编码&#xff1a; i. 词元序列编码 Input Embedding Module ii. 位置编码&#xff08;Position Embedding, PE)&#xff0c;Transformer 的编码器结构本身无法识别序列中元素的顺序。 &#x1d499;&#x1d461; &#x1d497;&#x1d461; &#x1d491…