html旋转相册
一、实验题目
做一个旋转的3d相册,当鼠标停留在相册时,相册向四面散开
二、实验代码
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{perspective: 1500px;}@keyframes myAnimation {from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}.container{margin:200px;position: relative;transform-style: preserve-3d;/* animation:myAnimation 5s linear 0s infinite; */animation-name: myAnimation;animation-duration: 5s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;}.container:hover>img:first-child{left: -300px;}.container:hover>img:nth-child(2){top: -300px;}.container:hover>img:nth-child(3){left: 300px;}.container:hover>img:nth-child(4){top: 300px;}.container:hover>img:nth-child(6){transform: translateZ(300px);}.container:hover>img:nth-child(5){transform: translateZ(-100px);}.container>img{width: 200px;height: 200px;position: absolute;border: 1px solid red;transition: 3s;}.container>img:first-child{left: -200px;transform-origin: right;transform: rotateY(90deg);}.container>img:nth-child(2){top:-200px;transform-origin: bottom;transform:rotateX(-90deg);}.container>img:nth-child(3){left: 200px;transform-origin: left;transform:rotateY(-90deg)}.container>img:nth-child(4){top: 200px;transform-origin: top;transform: rotateX(90deg);}.container>img:nth-child(6){transform: translateZ(200px);}</style></head><body><div class="container"><img src="https://img1.baidu.com/it/u=4141189809,1768157998&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt=""><img src="https://img0.baidu.com/it/u=2016271455,67708748&fm=253&fmt=auto&app=138&f=PNG?w=500&h=402" alt=""><img src="https://img2.baidu.com/it/u=2015943875,2629908785&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666" alt=""><img src="https://img2.baidu.com/it/u=106832573,1691962947&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=682" alt=""><img src="https://img0.baidu.com/it/u=2104936347,2912513001&fm=253&fmt=auto&app=138&f=JPEG?w=389&h=500" alt=""><img src="https://img1.baidu.com/it/u=1599285144,422526079&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt=""></div></body>
</html>
三、实验效果
相关文章:
html旋转相册
一、实验题目 做一个旋转的3d相册,当鼠标停留在相册时,相册向四面散开 二、实验代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" con…...
Plantuml之对象图语法介绍(十九)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…...
深度学习(八):bert理解之transformer
1.主要结构 transformer 是一种深度学习模型,主要用于处理序列数据,如自然语言处理任务。它在 2017 年由 Vaswani 等人在论文 “Attention is All You Need” 中提出。 Transformer 的主要特点是它完全放弃了传统的循环神经网络(RNN&#x…...
R语言中的函数28:Reduce(), Filter(), Find(), Map(), Negate(), Position()
文章目录 介绍Reduce()实例 Filter()实例 Find()实例 Map()实例 Negate()实例 Position()实例 介绍 R语言中的Reduce(), Filter(), Find(), Map(), Negate(), Position()是base包中的一些高级函数。随后,很多包也给这些函数提供了更多的扩展。 Reduce() 该函数根…...
RTP/RTCP/RTSP/SIP/SDP/RTMP对比
RTP(Real-time Transport Protocol)是一种用于实时传输音频和视频数据的协议。它位于传输层和应用层之间,主要负责对媒体数据进行分包、传输和定时。 RTCP(Real-Time Control Protocol)是 RTP 的控制协议,…...
Centos安装vsftpd:centos配置vsftpd,ftp报200和227错误
一、centos下载安装vsftpd(root权限) 1、下载安装 yum -y install vsftpd 2、vsftpd的配置文件 /etc/vsftpd.conf 3、备份原来的配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.backup 4、修改配置文件如下:vi /etc/vsftpd.conf …...
软件测试职业规划
软件测试人员的发展误区【4】 公司开发的产品专业性较强,软件测试人员需要有很强的专业知识,现在软件测试人员发展出现了一种测试管理者不愿意看到的景象: 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发); 2、业务…...
C语言数据结构
C 语言是一种强大的编程语言,它提供了许多数据结构的实现。在本文档中,我们将讨论一些常见的数据结构,并提供相应的代码示例。 数组(Array) 数组是一种线性数据结构,它可以存储相同类型的元素。数组的大小…...
PHP之Trait理解, Trait介绍
一、来源 自 PHP 5.4.0 起,PHP 实现了一种代码复用的方法,称为 trait。 Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制。Trait 为了减少单继承语言的限制,使开发人员能够自由地在不同层次结构内独立的类中复用 method。Trait 和…...
SpringMVC:执行原理详解、配置文件和注解开发实现 SpringMVC
文章目录 SpringMVC - 01一、概述二、SpringMVC 执行原理三、使用配置文件实现 SpringMVC四、使用注解开发实现 SpringMVC1. 步骤2. 实现 五、总结注意: SpringMVC - 01 一、概述 SpringMVC 官方文档:点此进入 有关 MVC 架构模式的内容见之前的笔记&a…...
增量式旋转编码器在STM32平台上的应用
背景 旋钮是仪器仪表上一种常见的输入设备,它的内部是一个旋转编码器,知乎上的这篇科普文章对其工作原理做了深入浅出的介绍。 我们公司的功率分析仪的前面板也用到了该类设备,最近前面板的MCU从MSP430切换成了STM32,因此我要将…...
INFINI Gateway 如何防止大跨度查询
背景 业务每天生成一个日期后缀的索引,写入当日数据。 业务查询有时会查询好多天的数据,导致负载告警。 现在想对查询进行限制–只允许查询一天的数据(不限定是哪天),如果想查询多天的数据就走申请。 技术分析 在每…...
【模式识别】探秘分类奥秘:最近邻算法解密与实战
🌈个人主页:Sarapines Programmer🔥 系列专栏:《模式之谜 | 数据奇迹解码》⏰诗赋清音:云生高巅梦远游, 星光点缀碧海愁。 山川深邃情难晤, 剑气凌云志自修。 目录 🌌1 初识模式识…...
【Redis】分布式锁
目录 分布式锁分布式锁实现的关键 Redisson实现分布式锁看门狗机制 分布式锁 为什么要使用分布式锁,或者分布式锁的使用场景? 定时任务。在分布式场景下,只控制一台服务器执行定时任务,这就需要分布式锁 要控制定时任务在同一时间…...
Linux访问firefox 显示Error: no DISPLAY environment variable specified
在 CentOS 7 中访问 Firefox 浏览器时,出现 "Error: no DISPLAY environment variable specified" 的错误提示通常是由于缺少显示环境变量导致的。 要解决这个问题,你可以按照以下步骤进行配置: 1. 确保已经安装 X Window Syst…...
线性回归简介
线性回归简介 1、情景描述2、线性回归 1、情景描述 假设,我们现在有这么一张图: 其中,横坐标x表示房子的面积,纵坐标y表示房价。我们猜想x与y之间存在线性关系: y k x b ykxb ykxb 现在,思考一个问题&…...
Log4net 教程
一、Log4net 教程 在CodeProject上找到一篇关于Log4net的教程:log4net Tutorial,这篇博客的作者是:Tim Corey ,对应源代码地址为: https://github.com/TimCorey/Log4netTutorial,视频地址为:Ap…...
test-01-java 单元测试框架 junit 入门介绍
JUnit JUnit 是一个用于编写可重复测试的简单框架。 它是 xUnit 架构的一种实例,专门用于单元测试框架。 What to test? NeedDescRight结果是否正确B边界条件是否满足I能反向关联吗C有其他手段交叉检查吗E是否可以强制异常发生P性能问题 maven 入门例子 maven …...
Linux系统中跟TCP相关的系统配置项
TCP连接保活 参考 《Nginx(三) 配置文件详解 - 基础模块》3.18章节 net.ipv4.tcp_keepalive_intvl:设置TCP两次相邻探活检测的间隔时间。默认75秒,单位是秒,对应配置文件/proc/sys/net/ipv4/tcp_keepalive_intvl;net.ipv4.tcp_kee…...
python图片批量下载多线程+超时重试
背景 上篇python入门实战:爬取图片到本地介绍过如何将图片下载到本地,但是实际处理过程中会遇到性能问题:分页数过多下载时间过程、部分页面连接超时无法访问下载失败。本文从实战的角度解释一下如何处理这两个问题。 下载时间过长问题,处理方式是使用多线程,首先回顾…...
冒泡排序之C++实现
描述 冒泡排序算法是一种简单的排序算法,它通过将相邻的元素进行比较并交换位置来实现排序。冒泡排序的基本思想是,每一轮将未排序部分的最大元素逐个向右移动到已排序部分的最右边,直到所有元素都按照从小到大的顺序排列。 冒泡排序的算法…...
【Spring实战】04 Lombok集成及常用注解
文章目录 0. 集成1. Data2. Getter 和 Setter3. NoArgsConstructor,AllArgsConstructor和RequiredArgsConstructor4. ToString5. EqualsAndHashCode6. NonNull7. Builder总结 Lombok 是一款 Java 开发的工具,它通过注解的方式简化了 Java 代码的编写&…...
ubuntu-22.04.3 配置
1.防火墙 a、查看防火墙状态:inactive是关闭,active是开启。 sudo ufw statusb、开启防火墙。 sudo ufw enablec、关闭防火墙。 sudo ufw disable2.设置Ip ifconfigsudo cp /etc/netplan/00-installer-config.yaml /etc/netplan/00-installer-config.y…...
[工具]java_sublime的快速使用
目录 使用 : 怎么运行: 调整字体: 使用 : 新建--->写好代码后-->另存为尾缀是.java的文件 怎么运行: 在你另存为的目录下cmd调用控制台输入dos指令--->执行javac 文件名.java(有.java尾缀)(编译为.class文件)--->java 文件名(没有.class尾缀设计者认为执行的是…...
【银行测试】银行金融测试+金融项目测试点汇总...
目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、银行金融测试是…...
将PPT的图保持高分辨率导入到Word / WPS中
1、将PPT中画好的图组合在一起,选择组合后的图复制(Ctrlc) 2、在Word中,选中左上角的粘贴选项--->选择性粘贴 WPS选择元文件 / Word选择增强型图元文件 这样放大也不模糊了...
如何在Spring Boot中优雅地进行参数校验
1. 前言 在平时的开发工作中,我们通常需要对接口进行参数格式验证。当参数个数较少(个数小于3)时,可以使用if ... else ...手动进行参数验证。当参数个数大于3个时,使用if ... else ...进行参数验证就会让代码显得臃肿…...
图还能有数据库?一文带你了解图数据库是个什么东西!
图数据库 基础 简介 %% 图数据库是图数据库管理系统的简称,是近年来新兴的一种NoSQL数据库使用图形化的模型进行查询的数据库,通过节点、边和属性等方式来表示和存储数据,支持增删改查::CRUD::等操作。图数据库一般用于OLTP系统中…...
力扣思维题——寻找重复数
题目链接:https://leetcode.cn/problems/find-the-duplicate-number/description/?envTypestudy-plan-v2&envIdtop-100-liked 这题的思维难度较大。一种是利用双指针法进行计算环的起点,这种方法在面试里很难说清楚,也很难想到。大致做…...
基于Kubernetes的jenkins上线
1、基于helm 部署jenkins 要求:当前集群配置了storageClass,并已指定默认的storageClass,一般情况下,创建的storageClass即为默认类 指定默认storageClass的方式 # 如果是新创建默认类: apiVersion: storage.k8s.io/v1…...
每日一题——轮转数组
1. 题目描述 给定一个整数数组nums,将数组中的元素向右轮转k个位置,其中k是非负数。 示例1: 输入:nums [1,2,3,4,5,6,7],k 3 输出:[5,6,7,1,2,3,4] 解释: 向右轮转 1步:[7,1,2,3,4,5,6] 向右…...
Unity手机移动设备重力感应
Unity手机移动设备重力感应 一、引入二、介绍三、测试成果X Y轴Z轴横屏的手机,如下图竖屏的手机,如下图 一、引入 大家对重力感应应该都不陌生,之前玩过的王者荣耀的资源更新界面就是使用了重力感应的概念,根据手机的晃动来给实体…...
nodejs微信小程序+python+PHP基于推荐算法的电影推荐系统-计算机毕业设计推荐django
目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…...
Linux 配置 swap 区
Linux 配置 swap 区 很多时候我们需要配置 swap 主要的原因是物理内存太贵了, 服务器也是一样, 当内存不够用时, 系统会卡死, 因此我们宁愿牺牲一点性能也要让系统正常运行。 当然, 在系统物理内存足够的条件下&#x…...
AG16KDDF256 User Manual
AGM AG16KDDF256 是由 AGM FPGA AG16K 与 DDR-SDRAM 叠封集成的芯片,具有 AG16K FPGA的可编程功能,提供更多可编程 IO,同时内部连接大容量 DDR-SDRAM。 FPGA 外部管脚 FBGA256 封装,管脚说明请见下表 Table-1: Tab…...
w15初识php基础
一、计算100之内的偶数之和 实现思路 所有的偶数除2都为0 代码实现 <?php # 记录100以内的偶数和 $number1; $num0; while($number<100){if($number%20){ $num$number;}$number1; } echo $num; ?>输出的结果 二、计算100之内的奇数之和 实现思路 所有的奇数除…...
powerbuilder Primary! Delete! Filter! 三个缓冲区的作用
Primary! 主缓存区,放正在使用的数据。 Delete! 删除缓存区,放将要删除但还没有提交到数据库的数据。 Filter! 筛选缓存区,放不符合筛选条件的数据。 最后在update的时候根据你的update设置生成相应的SQL语句。行的状态和所在的缓存区决定生…...
Confluent 与阿里云将携手拓展亚太市场,提供消息流平台服务
10 月 31 日,杭州云栖大会上,阿里云云原生应用平台负责人丁宇宣布,Confluent 成为阿里云技术合作伙伴,合作全新升级,一起拓展和服务亚太市场。 本次合作伙伴签约,阿里云与消息流开创领导者 Confluent 将进一…...
【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建
文章目录 前言一、搭建 Tauri 2.0 开发环境二、创建 Tauri 2.0 项目1.创建项目2.安装依赖4. 编译运行 三、设置开发环境四、项目结构 前言 Tauri在Rust圈内成名已久,凭借Rust的可靠性,使用系统原生的Webview构建更小的App 以及开发人员可以灵活的使用各…...
算法基础之01背包问题
01背包问题 核心思想: 二维数组普通写法: #include<iostream>#include<cstring>#include<algorithm>using namespace std;const int N 1010;int f[N][N]; //存 i个物品 容量不超过j 的总价值int v[N],w[N];int n,m;int main(){cin>>n>…...
Git的总体认知与具体实现
GIt概念 是一种分布式控制管理器 tips:敏捷开发 -> 先上线,后续开发再继续开发 集中式和分布式 集中式的版本控制系统每次在写代码时都需要从服务器中拉取一份下来,并且如果服务器丢失了,那么所有的就都丢失了,你本机客户端仅…...
Hadoop入门学习笔记——三、使用HDFS文件系统
视频课程地址:https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接:https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记(汇总) 目录 三、使用HDFS文件系统3.1. 使用命令操作HDFS文件系统3.1.…...
JavaWeb—html, css, javascript, dom,xml, tomcatservlet
文章目录 快捷键HTML**常用特殊字符替代:****标题****超链接标签****无序列表、有序列表****无序列表**:ul/li 基本语法**有序列表ol/li:****图像标签(img)**** 表格(table)标签****表格标签-跨行跨列表格****form(表单)标签介绍****表单form提交注意事项**div 标签p 标签sp…...
LangChain 31 模块复用Prompt templates 提示词模板
LangChain系列文章 LangChain 实现给动物取名字,LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索I…...
深入理解 Git 分支管理:提升团队协作与开发效率
目录 前言1 什么是分支2 分支的好处2.1 并行开发的支持2.2 独立性与隔离性2.3 灵活的版本控制2.4 提高安全性和代码质量2.5 项目历史的清晰记录 3 Git 分支操作命令3.1 git branch -v3.2 git branch 分支名称3.3 git checkout 分支名称3.4 git merge 分支名称3.5 git rebase 分…...
WPF StackPanel
StackPanel是一个控件容器,它按照一个方向(水平或垂直)堆叠子元素,使得它们沿一个轴线对齐。你可以在StackPanel中放置其他控件,如按钮、标签、文本框、图片等等。这些控件的排列方式由StackPanel按照指定的方向自动确…...
由正规表达式构造DFA,以及DFA的相关化简
目录 1.由正规式到DFA 首先讲如何从正规式到NFA 如何从NFA到DFA 2.DFA的化简 3.DFA和NFA的区别 1.由正规式到DFA 正规式--->NFA---->DFA 首先讲如何从正规式到NFA 转换规则: 例题1:这里圆圈里面的命名是随意的,只要能区别开就可以了 如何…...
模式识别与机器学习(九):Adaboost
1.原理 AdaBoost是Adaptive Boosting(自适应增强)的缩写,它的自适应在于:被前一个基本分类器误分类的样本的权值会增大,而正确分类的样本的权值会减小,并再次用来训练下一个基本分类器。同时,在…...
【JAVA】分布式链路追踪技术概论
目录 1.概述 2.基于日志的实现 2.1.实现思想 2.2.sleuth 2.2.可视化 3.基于agent的实现 4.联系作者 1.概述 当采用分布式架构后,一次请求会在多个服务之间流转,组成单次调用链的服务往往都分散在不同的服务器上。这就会带来一个问题:…...
ZooKeeper 使用介绍和原理详解
目录 1. 介绍 重要性 应用场景 2. ZooKeeper 架构 服务角色 数据模型 工作原理 3. 安装和配置 下载 ZooKeeper 安装和配置 启动 ZooKeeper 验证和管理 停止和关闭 4. ZooKeeper 数据模型 数据结构和层次命名空间: 节点类型和 Watcher 机制ÿ…...