当前位置: 首页 > news >正文

3D图片动画效果组件封装

1.效果

3D图片动画效果

2.组件部分

import "./index.less"/*** 3D图片动画效果* @pictures: 图片数组[封面,英雄,标题]*/
export const Picture3D = (props: any) => {console.log("3D图片动画效果", props)return <divclassName='picture3D'onClick={props.onClick}onMouseEnter={props.onMouseEnter}style={{width: props.width || "100%",height: props.height || "100%",}}>{/* 封面 */}<img src={props.pictures && (props.pictures[0] || "")} class="cover" />{/* 英雄 */}<img src={props.pictures && (props.pictures[1] || "")} class="hero" />{/* 标题 */}<img src={props.pictures && (props.pictures[2] || "")} class="title" /></div>
};

3. css样式部分

// 3D图片动画效果
.picture3D {// width: 300px;// height: 500px;position: relative;& img {position: absolute;left: 0;width: 100%;/* 因为图片的效果是有过渡的,我们在这里也统一设置一下 */transition: 0.5s;height: 100%;width: 100%;}.cover {height: 100%;z-index: 1;}.hero {height: 100%;z-index: 2;/* 英雄在最初是不可见的 */opacity: 0;}.title {z-index: 3;}
}.picture3D:hover .cover {/* 设置旋转 3D透视 */transform: perspective(500px) rotateX(25deg);/* 设置阴影 */box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75);
}.picture3D:hover .hero {/* 透明度设置为不透明 */opacity: 1;/* 同样设置 3D 效果,然后横向不移动,纵向向上移动 50px,z 轴上靠近我们的眼睛一点设置 50px */transform: perspective(500px) translate3d(0, -50px, 50px);
}.picture3D:hover .title {/* 设置 3D 效果,,然后横向不移动,纵向向上移动 25px,z 轴上靠近我们的眼睛一点设置 50px */transform: perspective(500px) translate3d(0, -25px, 50px);
}

4. 组件使用

import { observer } from 'mobx-react';
import './index.less';
import { Picture3D } from '@/components/MyComponents/index'; // 引用组件export default observer((props: any) => {return <div className={`report bg-white dark:bg-black text-black dark:text-white`}>{/* 组件使用传值 */}<Picture3Dwidth={300}height={500}onClick={() => { console.log('点击了') }}pictures={[require('@/assets/3.webp'), require('@/assets/8.png'), require('@/assets/1.png')]}/></div>}) 

相关文章:

3D图片动画效果组件封装

1.效果 3D图片动画效果 2.组件部分 import "./index.less"/*** 3D图片动画效果* pictures: 图片数组[封面,英雄,标题]*/ export const Picture3D (props: any) > {console.log("3D图片动画效果", props)return <divclassNamepicture3DonClick{prop…...

高级优化算法之 fminunc函数 实践

说明 在本专栏机器学习_墨#≯的博客-CSDN博客前面几篇文章中&#xff0c;大多采用梯度下降法来求解。其实还有很多的高级优化算法可以用来求解回归和分类问题&#xff0c;本文就是在吴恩达机器学习视频课程[1]的启示下&#xff0c;想要简单尝试一下Matlab自带的无约束多变量函数…...

1.5 ROS架构

到目前为止&#xff0c;我们已经安装了ROS&#xff0c;运行了ROS中内置的小乌龟案例&#xff0c;并且也编写了ROS小程序&#xff0c;对ROS也有了一个大概的认知&#xff0c;当然这个认知可能还是比较模糊并不清晰的&#xff0c;接下来&#xff0c;我们要从宏观上来介绍一下ROS的…...

Redis Search系列 - 第四讲 支持中文

目录 一、支持中文二、自定义中文词典2.1 Redis Search设置FRISOINI参数2.2 friso.ini文件相关配置1&#xff09;自定义friso UTF-8字典2&#xff09;修改friso.ini配置文件 三、实测中文分词效果 一、支持中文 Redis Stack 从版本 0.99.0 开始支持中文文档的添加和分词。中文…...

架构师备考-架构图设计案列

本文中所涉及的架构图主要参考软考-架构设计师历年Web 架构设计案例真题&#xff0c;在其基础上进行补充说明。 历年软考架构师案例题-Web架构设计考点 2014 MVC 架构2015、2016 J2EE 架构2017 经典网络架构2018 SOA 架构2019 分布式架构2020 SSM 架构2021 云平台架构2022 物…...

专业级Facebook直播工具推荐:提升你的直播体验

随着社交媒体的迅速发展&#xff0c;直播已成为现代内容传播的重要方式。Facebook作为全球最大的社交平台之一&#xff0c;为用户和企业提供了丰富的直播功能&#xff0c;吸引了众多观众和参与者。在这个竞争激烈的环境中&#xff0c;如何打造高质量的直播内容显得尤为重要。本…...

【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (三):Cors的设置及.env文件的设置

本项目旨在学习如何快速使用 nodejs 开发后端api&#xff0c;并为以后开展其他项目的开启提供简易的后端模版。&#xff08;非后端工程师&#xff09; 由于文档是代码写完之后&#xff0c;为了记录项目中需要注意的技术点&#xff0c;因此文档的叙述方式并非开发顺序&#xff0…...

[python flask 数据库ORM操作]

一、链接数据库 我们选择的框架是flask-sqlAlchemy 这个框架是对pymysql的封装。 连接数据库 #导入包 from flask_sqlalchemy import SQLAlchemy #创建flask app对象 app Flask(__name__) #设置配置信息 HOSTNAME "localhost" PORT 3306; USERNAME "root&…...

【JavaScript】如何优雅的编码if判断中的一个变量多个或条件

前言 你是否写过这样代码: ...if (status 1 || status 4 || status 6)...代码场景是这样的&#xff0c;记录有多个状态&#xff0c;当状态等于1,4,6时要做相同的逻辑。今天我们就分享一下如何简化写法&#xff0c;让代码更好看&#xff0c;更优雅。 使用 switch 语句 ...…...

SaaS云诊所系统源码,基于云计算技术的SAAS模式诊所管理系统,适用于诊所、门诊、卫生服务站、卫生站

SaaS云诊所管理系统源码&#xff0c;门诊管理系统源码&#xff0c;诊所药店云平台源码 云诊所管理系统是基于云计算的SAAS模式诊所管理系统&#xff0c;全面适用于诊所、门诊、卫生服务站、卫生站、卫生所、中医馆、药店、私人个体诊所、中小型门诊、乡村卫生室、医务室以及社…...

字节,AI产品经理面试,拿下offer!

如果大家最近打算找ai产品经理这方面的工作&#xff0c;可以对照着脑图准备起来啦。 这篇文章给大家讲解两道高频问题&#xff1a; 1&#xff09;AI产品经理和传统产品经理有什么区别 2&#xff09;AI 产品经理的工作职责和能力要求是什么&#xff1f; 这两个问题看似简单&a…...

Postgresql pgsql 插件之postgis 安装配置

相关链接&#xff1a; pgsql编译安装 一、说明 postgis是pgsql最强大的几个插件之一&#xff0c;可以用于地理信息系统&#xff08;gis&#xff09;的搭建 二、插件安装启动 由于我的pgsql是编译安装的&#xff0c;所以插件也是编译安装&#xff0c;更加灵活。 1.进入到源…...

单片机STC8H8K64U开发板_RA6809开发板 驱动彩屏显示

单片机STC8H8K64U开发板&#xff0c;型号RT8H8K001 预留Type C接口&#xff0c;可供电SWD下载&#xff1a; RA6809开发板&#xff0c;型号RT6809CNN01 预留Type C接口供电&#xff0c;预留MCU接口、电容触摸屏接口、液晶屏接口&#xff1a; 双臂合一&#xff0c;驱动和控…...

Redis底层和缓存雪崩,击穿,穿透

一、Redis的数据结构 1.动态字符串 我们知道Redis中保存的Key是字符串&#xff0c;value往往hi字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。不过&#xff0c;Redis 没有直接使用c语言的字符串&#xff0c;因为c语言字符串存在许多问题&#xff1a; …...

[Java基础] 集合框架

往期回顾 [Java基础] 基本数据类型 [Java基础] 运算符 [Java基础] 流程控制 [Java基础] 面向对象编程 [Java基础] 集合框架 [Java基础] 输入输出流 [Java基础] 异常处理机制 [Java基础] Lambda 表达式 目录 List 接口 数据结构 最佳实践 实战代码 Set 接口 数据…...

机器学习基础:算法如何让 AI 自我学习

大家好&#xff0c;我是Shelly&#xff0c;一个专注于输出AI工具和科技前沿内容的AI应用教练&#xff0c;体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具&#xff0c;拥抱AI时代的到来。 AI工具集1&#xff1a;大厂AI工具【共23款…...

25届字节跳动 抖音NLP算法工程师 面经

目录 一面/技术面 2024/08/30二面/技术面 2024/09/13 一面/技术面 2024/08/30 深挖实习&#xff08;最近的一段实习&#xff09;深挖论文&#xff08;让我共享屏幕&#xff0c;然后对着自己的论文讲&#xff09;论文做了多久完成的&#xff1f;主要都做了哪些工作&#xff1f;…...

转行网络工程师以后的就业前景如何?

就业前景如何本质上取决于你在这行业的发展状况&#xff0c;而发展状况又主要由你的技术水平和与人交流的能力所决定。 如果你的技术能力仅限于"安服仔"、"脚本小子"等入门级水平&#xff0c;那你的职业发展可能会像浮萍一样漂泊不定。但如果你能轻松编写…...

docker 和 containerd 关系

containerd 是一个开源的容器运行时&#xff0c;它是用来管理容器生命周期的守护进程。containerd 支持 Docker 和其他容器格式&#xff0c;并且是许多现代容器编排系统&#xff08;如 Kubernetes&#xff09;的基础组件之一。 containerd 提供了一个命令行工具 ctr&#xff0…...

算法-二叉树的最大路径和

为了找到二叉树的最大路径和&#xff0c;我们需要考虑所有可能的路径&#xff0c;包括不经过根节点的路径&#xff0c;所以其实如果你从整体上来一条路径一条路径的遍历&#xff0c;太复杂&#xff0c;我们可以换个思路&#xff0c;从每个节点出发&#xff0c;就把那个节点当成…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...