当前位置: 首页 > 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;就把那个节点当成…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...