微信小程序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.rhkb.cn/news/459482.html

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

相关文章

深入理解 SQL 中的 WITH AS 语法

在日常数据库操作中&#xff0c;SQL 语句的复杂性往往会影响到查询的可读性和维护性。为了解决这个问题&#xff0c;Oracle 提供了 WITH AS 语法&#xff0c;这一功能可以极大地简化复杂查询&#xff0c;提升代码的清晰度。本文将详细介绍 WITH AS 的基本用法、优势以及一些实际…

java项目之电影评论网站(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的电影评论网站。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 电影评论网站的主要使用者管…

Pnetlab免登录方式

Pnetlab免登录方式 文档&#xff1a;https://blog.wamoyu.com/docs/pnetlab/Installation/physicalInstallation 官方&#xff1a;https://pnetlab.com/pages/main Username:Michealzou password:ztr940407 操作系统&#xff1a;Ubuntu 20.4 1.裸机方式安装pnetlab: curl …

听书项目(一)

内容来源 尚硅谷知识星球&#xff0c;精选项目&#xff0c;只记录开发中的优点功能&#xff0c;并不涉及侵权问题&#xff0c;若有侵权联系作者删除。 项目背景 随着智能手机和高速互联网的普及&#xff0c;人们开始寻求更便捷的方式来获取信息和娱乐。有声书的出现使得人们…

部署DNS主从服务器

一。DNS主从服务器作用&#xff1a; DNS作为重要的互联网基础设施服务&#xff0c;保证DNS域名解析服务的正常运转至关重要&#xff0c;只有这样才能提供稳定、快速日不间断的域名查询服务 DNS 域名解析服务中&#xff0c;从服务器可以从主服务器上获取指定的区域数据文件&…

Java面向对象编程进阶(四)

Java面向对象编程进阶&#xff08;四&#xff09; 一、equals()方法的使用二、toString()方法的使用三、复习 一、equals()方法的使用 适用性&#xff1a;任何引用数据都可以使用。 自定义的类在没有重写Object中equals()方法的情况下&#xff0c;调用的就是Object类中声明的…

Docker搭建基于Nextcloud的个人云盘/私有云盘/个人相册/家庭NAS

安装配置Docker 官方安装文档&#xff1a;https://docs.docker.com/engine/install/ Docker常用命令&#xff1a;https://blog.csdn.net/qq_43003203/article/details/139532097?spm1001.2014.3001.5502 Docker镜像仓库配置方法和国内常用镜像仓库地址&#xff1a; 输入&a…

k8s 二进制部署安装(三)

目录 部署Calico Calico 工作原理 部署Calico 部署CoreDNS 负载均衡部署 部署dashboard 部署Calico 安装步骤来到 CNI 网络组件 &#xff0c;在&#xff08;二&#xff09;中我们安装了flannel&#xff0c;现在我们要尝试安装另一网络组件Calico calico 不使用隧道或NAT…

Spring Task—定时任务

Spring Task 是 Spring 提供的一种轻量级定时任务调度功能&#xff0c;内置在 Spring 框架中。与 Quartz 等重量级调度框架相比&#xff0c;Spring Task 使用简便&#xff0c;无需额外依赖&#xff0c;适合在简单的调度任务场景中使用。通过注解配置方式&#xff0c;开发者可以…

docker 安装 PostgreSQL

参考链接 https://hub.docker.com/_/postgres 安装 # 后台运行&#xff0c;镜像名称为 postgres # --name postgres 容器名称为 postgres # POSTGRES_PASSWORD 超级用户的密码&#xff0c;超级用户名默认为&#xff1a;postgres&#xff0c;可以使用 POSTGRES_USER 环境变量设…

Flink(一)

目录 架构处理有界与无界数据部署应用到任意地方运行任意规模应用利用内存性能 流应用流处理应用的基本组件流状态时间 应用场景事件驱动应用事件驱动应用的优势Flink如何支持事件驱动应用&#xff1f; 典型的事件驱动示例 数据分析应用流式分析应用的优势&#xff1f;Flink 如…

【数据结构和算法】三、动态规划原理讲解与实战演练

目录 1、什么是动态规划&#xff1f; 2、动态规划实战演练 2.1 力扣题之爬楼梯问题 &#xff08;1&#xff09;解题思路1: &#xff08;2&#xff09;解题思路2: &#xff08;3&#xff09;动态规划&#xff08;DP&#xff09;&#xff1a;解题思路 &#xff08;4&#x…

中天控股智慧园区项目

— 项目概况 — 项目名称&#xff1a;智慧园区项目 项目地点&#xff1a;云南省 合作单位&#xff1a;中天控股集团有限公司&#xff08;简称“中天控股”&#xff09; 汇匠源与中天控股集团有限公司&#xff08;简称“中天控股”&#xff09;曾在智慧园区项目展开合作&a…

前端自学资料(笔记八股)分享—CSS(4)

更多详情&#xff1a;爱米的前端小笔记&#xff08;csdn~xitujuejin~zhiHu~Baidu~小红shu&#xff09;同步更新&#xff0c;等你来看&#xff01;都是利用下班时间整理的&#xff0c;整理不易&#xff0c;大家多多&#x1f44d;&#x1f49b;➕&#x1f914;哦&#xff01;你们…

MySQL查看某个数据库里面每张表的字符集和字符排序集

字符集&#xff1a; 定义了MySQL中数据在硬盘上的存储方式。例如 utfmb3、utfmb4等。每个不同的字符集都拥有一个默认的字符排序集。 字符排序集&#xff1a; 定义了在数据库中进行字符串比较和排序的方式。 &#xff08;1&#xff09;比较字符串&#xff1a;确定两个字符串是否…

Git相关介绍

基本概念 关注&#xff08;watch&#xff09; 关注项目&#xff0c;当项目更新可以接收到通知 事物卡片&#xff08;Issue&#xff09; 发现代码BUG&#xff0c;但是目前没有成型代码&#xff0c;需要讨论时用 Git工作区域 工作区 添加、编辑、修改文件等动作 暂存区 …

坚持使用kimi搭建小程序2小时(04天/05天)

运用好kimi智能助手里面的存储小程序&#xff0c;{缺乏一个相对稳定的反馈体系&#xff0c;自己所挑选的稳定反馈体系就是编程!} 开源竞争&#xff1a; 当你无法彻底掌握一门技术的时候&#xff0c;就开源这门技术&#xff0c;培养出更多的技术依赖&#xff0c;让更多人完善你…

VMware虚拟机启动报错“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”

之前正常使用的VMware虚拟机&#xff0c;突然启动时报错&#xff1a;此主机支持 Intel VT-x&#xff0c;但 Intel VT-x 处于禁用状态&#xff0c;详细信息如下截图所示。   百度错误信息&#xff0c;根据参考文献1中的方案&#xff0c;进入BIOS设置启动VT-x。进入BIOS后&…

spyglass关于cdc检测的一处bug

最近在使用22版spyglass的cdc检测功能&#xff0c;发现struct_check的cdc检测实际时存在一些bug的。 构造如下电路&#xff0c;当qualifier和destination信号汇聚时&#xff0c;如果des信号完全将qualifier gate住&#xff0c;sg仍然会报ac_sync。当然此问题可以通过后续funct…

基础知识-因果分析-daythree-独立性检验-贝叶斯公式及应用

根据概率乘法公式有P(AB)P(B|A)P(A)变形为除法形式&#xff0c;则有 更一般地&#xff0c;假设事件的集合B1&#xff0c;B2&#xff0c;…&#xff0c;Bn构成样本空间的一个划分&#xff0c;则根据全概率公式有 将式(2.14)中的B替换为Bi&#xff0c;则有 再代入P(A)的全概率计算…