【HTML + CSS 魔法秀】打造惊艳 3D 旋转卡片

在这里插入图片描述

HTML结构

  • box 类是整个组件的容器。
  • item-wrap 类是每个旋转卡片的包装器,每个都有一个内联样式–i,用于控制动画的延迟。
  • item类是实际的卡片内容,包含一个图片。
<template><div class="box"><div class="item-wrap" style="--i: 0"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 1"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 2"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 3"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 4"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div><div class="item-wrap" style="--i: 5"><div class="item"><img src="@/static/common_bot.png" alt="img" class="image" /></div></div></div>
</template>

CSS样式

  • .item-wrap 使用display: contents;来移除包装器的边界框,只保留子元素的边界框。
  • animation 属性定义了一个名为slide的关键帧动画,每个.item-wrap根据–i变量的不同而有不同的延迟。
  • .item 类包含了一个transform属性,用于控制卡片的平移和缩放。
  • transition 属性定义了.item变换的过渡效果。
<style scoped>
.box {display: flex;justify-content: center;align-items: center;position: relative;height: calc(100vh - 300px);background: rgba(31, 48, 53, 0.8);
}.image {width: 100%;height: 100%;
}@property --index {syntax: "<number>";initial-value: 0;inherits: false;
}@keyframes slide {0% {--index: 0;}100% {--index: 6;}
}.item-wrap {display: contents;animation: slide 12s calc(-2s * var(--i)) steps(6) infinite;
}.item {position: absolute;display: grid;place-content: center;width: 180px;height: 180px;border-radius: 8px;background-color: rgba(67, 141, 255, 0.4);border: 1px solid rgba(67, 141, 255, 0.8);color: #fff;font-size: 30px;counter-increment: num;transform: translate(var(--translate)) scale(var(--scale));transition: .5s transform;animation: slide 12s calc(-2s * var(--i)) infinite;
}.item-wrap:hover.item {animation-play-state: paused;
}@container style(--index: 0) {.item {transform: translate(0, 0) scale(1);z-index: 4;}
}@container style(--index: 1) {.item {transform: translate(120%, -30%) scale(0.9);z-index: 3;}
}@container style(--index: 2) {.item {transform: translate(100%, -70%) scale(0.8);z-index: 2;}
}@container style(--index: 3) {.item {transform: translate(0, -90%) scale(0.7);z-index: 1;}
}@container style(--index: 4) {.item {transform: translate(-100%, -70%) scale(0.8);z-index: 2;}
}@container style(--index: 5) {.item {transform: translate(-120%, -30%) scale(0.9);z-index: 3;}
}
</style>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/450651.html

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

相关文章

STM32L010F4 最小系统设计

画一个 STM32L010F4 的测试板子...... by 矜辰所致前言 最近需要用到一个新的 MCU&#xff1a; STM32L010F4 &#xff0c;上次测试的 VL53L0X 需要移植到这个芯片上&#xff0c;网上一搜 STM32L010F4&#xff0c;都是介绍资料&#xff0c;没有最小系统&#xff0c;使用说明等。…

计算生物学与生物信息学漫谈-1-测序一路走来

最近工作中&#xff0c;反思自己计算生物学基础非常薄弱&#xff0c;然而作为一门非常新兴的交叉学科&#xff0c;涉及计算机、物理、生物、数学等多多学科&#xff0c;国内并没有这样完善的教程&#xff0c;因此想要自己做一个教程&#xff0c;使用费曼学习法学习&#xff0c;…

探讨淘宝商品 API 接口:运用及收益

在当今电子商务蓬勃发展的时代&#xff0c;淘宝作为全球领先的电商平台&#xff0c;拥有海量的商品资源和庞大的用户群体。而淘宝商品 API 接口的出现&#xff0c;为开发者和企业提供了一种强大的工具&#xff0c;能够实现对淘宝商品数据的高效获取和利用。本文将深入探讨淘宝商…

C语言 | Leetcode C语言题解之第492题构造矩形

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> constructRectangle(int area) {int w sqrt(1.0 * area);while (area % w) {--w;}return {area / w, w};} };

2024年PDF转JPG新趋势,4款常用编辑工具梳理,不容错过

嘿&#xff0c;大家好&#xff0c;我是你们的老朋友&#xff0c;今天咱们聊个超实用的技巧——把PDF文件变成JPG图片&#xff0c;这样分享起来就方便多了。不管是工作汇报、学习资料还是生活照片&#xff0c;这招都能让你事半功倍。 1. 福昕PDF编辑器 闪现 ✚ https://editor…

排序---java---黑马

排序算法 名称平均时间复杂度最好情况最坏情况空间复杂度稳定性冒泡排序 O ( n 2 ) O(n^2) O(n2) O ( n ) O(n) O(n) O ( n 2 ) O(n^2) O(n2) O ( 1 ) O(1) O(1) Y Y Y选择排序 O ( n 2 ) O(n^2) O(n2) O ( n 2 ) O(n^2) O(n2) O ( n 2 ) O(n^2) O(n2) O ( 1 ) O(1) O(1) N N …

【JavaScript】网页交互的灵魂舞者

我的主页&#xff1a;2的n次方_ 1. JavaScript 的三种引入方式 引⼊⽅式 语法描述 ⽰例 ⾏内样式 直接嵌⼊到 html 元素内部 <input type"button" value"点我⼀下" οnclick"alert(haha)"> 内部样式 定义<script>标签&a…

PDF 软件如何帮助您编辑、转换和保护文件

如何找到最好的 PDF 编辑器。 无论您是在为您的企业寻找更高效的 PDF 解决方案&#xff0c;还是尝试组织和编辑主文档&#xff0c;PDF 编辑器都可以在一个地方提供您需要的所有工具。市面上有很多 PDF 编辑器 — 在决定哪个最适合您时&#xff0c;请考虑这些因素。 1. 确定您的…

蒙特卡洛法面波频散曲线反演(matlab)

面波频散曲线反演是一种地震波形反演方法&#xff0c;用于估计地下结构的物理参数。其原理基于面波频散现象&#xff0c;即地震波在地下传播时会由于地下结构的变化而导致波速的变化&#xff0c;从而在地震记录中形成不同频率的相位延迟。具体而言&#xff0c;面波频散曲线反演…

Jmeter接口测试企业级项目实战day3

1.了解Jmeter的内部细节&#xff0c;排查错误的原因 取样器&#xff1a;发送请求&#xff0c;接受响应 -> 查看结果树请求和响应&#xff08;头和正文&#xff09; 断言&#xff1a;验证响应 ->查看结果树&#xff08;采样结果&#xff09; 提取…

JavaWeb 22.Node.js_简介和安装

有时候&#xff0c;后退原来是向前 —— 24.10.7 一、什么是Node.js Node.js 是一个于 Chrome V8 的 JavaScript 运行时环境&#xff0c;可以使 JavaScript 运行在服务器端。使用 Node.js&#xff0c;可以方便地开发服务器端应用程序&#xff0c;如 Web 应用、API、后端服务&a…

FreeRTOS学习笔记1

结合汇编 ldr r3, pxCurrentTCB ldr r2 R3 value0x20000054,R2 value0x2002B950 pxCurrentTCB 020028950 pxTopOfStsck 0x2002B8FC 解释这些寄存器的值是怎么变化的 1. ldr r3, pxCurrentTCB 这一行指令将 全局变量 pxCurrentTCB 的地址加载到寄存器 r3 中。pxCu…

【网络】详解TCP协议的延时应答、捎带应答、异常处理

【网络】详解TCP协议的延时应答和捎带应答 一. 延时应答模型 二. 捎带应答模型再谈四次挥手 三. 异常处理1.一方出现进程崩溃2.一方出现关机&#xff08;正常流程关机&#xff09;3.一方出现断电4.网线断开 一. 延时应答 也是基于滑动窗口&#xff0c;想要尽可能的去提高效率。…

用Java爬虫API,轻松获取taobao商品SKU信息

在电子商务的世界里&#xff0c;SKU&#xff08;Stock Keeping Unit&#xff0c;库存单位&#xff09;是商品管理的基础。对于商家来说&#xff0c;SKU的详细信息对于库存管理、价格策略制定、市场分析等都有着重要作用。taobao作为中国最大的电子商务平台之一&#xff0c;提供…

制药企业MES与TMS的数据库改造如何兼顾安全与效率双提升

*本图由AI生成 在全球制造业加速数字化转型的浪潮中&#xff0c;一家来自中国的、年营业额超过200亿元的制药企业以其前瞻性的视角和果断的行动&#xff0c;成为该行业里进行国产化改造的先锋。通过实施数据库改造试点项目&#xff0c;该企业实现了其关键业务系统MES&#xff0…

IEC104规约的秘密之九----链路层和应用层

104规约从TCP往上&#xff0c;分成链路层和应用层。 如图&#xff0c;APCI就是链路层&#xff0c;ASDU的就是应用层 我们看到报文都是68打头的&#xff0c;因为应用层报文也要交给链路层发送&#xff0c;链路层增加了开头的6个字节再进行发送。 完全用于链路层的报文每帧都只有…

【初阶数据结构】归并排序 - 分而治之的排序魔法

文章目录 前言1. 什么是归并排序&#xff1f;1.1 归并排序的步骤 2. 归并排序的代码实现2.1 归并排序代码的关键部分讲解2.1.1 利用递归2.1.2 将拆解的数组的元素放到一个临时空间中进行重新排序2.1.3 将在临时空间中排好的数组复制到目标数组中 3. 归并排序的非递归写法 前言 …

CTFHub | HTTP协议 - 请求方式 | 题解实操

CTFHUB 的 HTTP 请求方式题目为参与者带来了独特的挑战和学习机会。在这个题目中&#xff0c;要求参与者使用特定的方式请求来获取 flag。这不仅考验了参与者对 HTTP 请求方法的理解和掌握程度&#xff0c;还促使他们探索不同的工具和技术来解决问题。 题目背景设定在网络安全…

关于MyBatis-Plus 提供Wrappers.lambdaQuery()的方法

实例&#xff1a; private LambdaQueryWrapper<XXX> buildQueryWrapper(XXXBo bo) { Map<String, Object> params bo.getParams(); LambdaQueryWrapper<XXX> lqw Wrappers.lambdaQuery(); lqw.eq(bo.getOrgId() ! null, XXX::getOrgId, bo.getOrgId()); lq…

拼三角问题

欢迎来到杀马特的主页&#xff1a;羑悻的小杀马特.-CSDN博客 目录 一题目&#xff1a; 二思路&#xff1a; 三解答代码&#xff1a; 一题目&#xff1a; 题目链接&#xff1a; 登录—专业IT笔试面试备考平台_牛客网 二思路&#xff1a; 思路&#xff1a;首先明白能组成三角形…