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

HTMLCSS:3D 旋转卡片的炫酷动画

效果演示

这段代码是一个HTML和CSS的组合,用于创建一个具有3D效果的动画卡片。

HTML

<div class="obj"><div class="objchild"><span class="inn6"><h3 class="text">我是谁?我在那</h3></span></div>
</div>
  • obj:创建了一个类名为 “obj” 的div元素,它将作为3D对象的容器。
  • objchild:创建了一个类名为 “objchild” 的div元素,它将作为3D对象的子元素。
  • inn6:创建了一个类名为 “inn6” 的span元素,它将包含文本内容。
  • text:创建了一个标题为 “我是谁?我在那” 的h3元素,它将显示在页面上。

CSS

.obj {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;transition: 0.5s all;transform: rotateX(-25deg) rotateY(20deg);}.objchild {animation: rotate 4s infinite linear;transform-style: preserve-3d;position: absolute;width: 100%;height: 100%;border-radius: 10px;
}.objchild::after {content: "";position: absolute;width: 100%;height: 100%;filter: blur(20px);box-shadow: 0 0 200px 15px white;transform: rotateX(90deg) scale(1.1) translateZ(-120px);
}.inn6 {position: absolute;width: 100%;height: 100%;background: rgb(21, 21, 21);transform: rotateX(90deg) translateZ(100px);animation: updown 4s infinite ease-in-out;border-radius: 10px;
}.text {color: #fff;font-size: 20px;text-align: center;line-height: 200px;font-weight: 600;
}@keyframes rotate {0% {transform: rotate3d(0, 1, 0, 0deg);}100% {transform: rotate3d(0, 1, 0, 360deg);}
}@keyframes updown {0% {transform: translateY(100px) rotateX(90deg) translateZ(100px);}50% {transform: translateY(200px);}100% {transform: translateY(100px) rotateX(450deg) translateZ(100px);}
}
  • .obj 类定义了一个相对定位的容器,宽200px,高200px。transform-style: preserve-3d; 保持3D效果,transition: 0.5s all; 表示所有属性的过渡时间为0.5秒。transform: rotateX(-25deg) rotateY(20deg); 表示对象将绕X轴旋转-25度,绕Y轴旋转20度。
  • .objchild 类定义了一个绝对定位的子元素,它将填满其父元素。animation: rotate 4s infinite linear; 表示动画名为 “rotate”,持续时间为4秒,无限循环,线性速度。transform-style: preserve-3d; 保持3D效果。
  • .objchild::after 是一个伪元素,用于创建一个模糊的白色光晕效果。filter: blur(20px); 应用20像素的模糊效果,box-shadow: 0 0 200px 15px white; 创建一个白色的阴影效果,transform: rotateX(90deg) scale(1.1) translateZ(-120px); 表示伪元素将绕X轴旋转90度,放大1.1倍,并在Z轴上向后移动。
  • .inn6 类定义了一个绝对定位的span元素,它将填满其父元素。背景色为黑色,transform: rotateX(90deg) translateZ(100px); 表示元素将绕X轴旋转90度,并在Z轴上向前移动100px。animation: updown 4s infinite ease-in-out; 表示动画名为 “updown”,持续时间为4秒,无限循环,缓动函数为ease-in-out。
  • @keyframes rotate 定义了一个名为 “rotate” 的关键帧动画,从0度旋转到360度。
  • @keyframes updown 定义了一个名为 “updown” 的关键帧动画,元素将上下移动,并在X轴和Z轴上旋转。

相关文章:

HTMLCSS:3D 旋转卡片的炫酷动画

效果演示 这段代码是一个HTML和CSS的组合&#xff0c;用于创建一个具有3D效果的动画卡片。 HTML <div class"obj"><div class"objchild"><span class"inn6"><h3 class"text">我是谁&#xff1f;我在那<…...

Node.js 全栈开发进阶篇

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js- 全栈开发进阶篇 前言 大家好&#xff0c;我是青山。在上一篇文章中&#xff0c;…...

SQL语句-MySQL

数据定义声明 改变数据库语句 ALTER {DATABASE | SCHEMA} [db_name]alter_option ... ALTER {DATABASE | SCHEMA} db_nameUPGRADE DATA DIRECTORY NAMEalter_option: {[DEFAULT] CHARACTER SET [] charset_name| [DEFAULT] COLLATE [] collation_name } ALTER DATABASE使您能…...

Tencent Hunyuan3D

一、前言 腾讯于2024年11月5日正式开源了最新的MoE模型“混元Large”以及混元3D生成大模型“Hunyuan3D-1.0”&#xff0c;支持企业及开发者在精调、部署等不同场景下的使用需求。 GitHub - Tencent/Hunyuan3D-1 二、技术与原理 Hunyuan3D-1.0 是一款支持文本生成3D&#xff08;…...

[ABC239E] Subtree K-th Max

[ABC239E] Subtree K-th Max 题面翻译 给定一棵 n n n 个节点的树&#xff0c;每个节点的权值为 x i x_i xi​。 现有 Q Q Q 个询问&#xff0c;每个询问给定 v , k v,k v,k&#xff0c;求节点 v v v 的子树第 k k k 大的数。 0 ≤ x i ≤ 1 0 9 , 2 ≤ n ≤ 1 0 5 , …...

Axure设计之左右滚动组件教程(动态面板)

很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等&#xff0c;接下来我们用Axure来实现一下左右滚动的菜单导航。通过案例我们可以举一反三进行其他方式的滚动组件设计&#xff0c;如常见的上下滚动、翻页滚动等等。 一、效果展示&#xff1a; 1、点击“向左箭…...

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子&#xff1a;对于模型文件&#xff0c;动辄就是好几个G&#xff0c;而有的仓库更是高达几十G&#xff0c;拉一个仓库到本地&#xff0c;稍不注意直接磁盘拉满都有可能。 比如&#xff1a;meta-llama-3.1-8b-instruct&#xff0c;拉到本地后发现居然占用了60G…...

Oracle RAC的thread

参考文档&#xff1a; Real Application Clusters Administration and Deployment Guide 3 Administering Database Instances and Cluster Databases Initialization Parameter Use in Oracle RAC Table 3-3 Initialization Parameters Specific to Oracle RAC THREAD Sp…...

如何创建备份设备以简化 SQL Server 备份过程?

SQL Server 中的备份设备是什么&#xff1f; 在 SQL Server 中&#xff0c;备份设备是用于存储备份数据的物理或逻辑介质。备份设备可以是文件、设备或其他存储介质。主要类型包括&#xff1a; 文件备份设备&#xff1a;通常是本地文件系统中的一个或多个文件。可以是 .bak 文…...

DeBiFormer实战:使用DeBiFormer实现图像分类任务(一)

摘要 一、论文介绍 研究背景&#xff1a;视觉Transformer在计算机视觉领域展现出巨大潜力&#xff0c;能够捕获长距离依赖关系&#xff0c;具有高并行性&#xff0c;有利于大型模型的训练和推理。现有问题&#xff1a;尽管大量研究设计了高效的注意力模式&#xff0c;但查询并…...

【go从零单排】迭代器(Iterators)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;迭代器的实现通常不是通过语言内置的迭代器类型&#x…...

Java与HTML:构建静态网页

在Web开发领域&#xff0c;HTML是构建网页的基础标记语言&#xff0c;而Java作为一种强大的编程语言&#xff0c;也能够在创建HTML内容方面发挥重要作用。今天&#xff0c;我们就来探讨一下如何使用Java来制作一个不那么简单的静态网页。 一、项目准备 首先&#xff0c;我们需…...

软件测试:测试用例详解

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、通用测试用例八要素   1、用例编号&#xff1b;    2、测试项目&#xff1b;   3、测试标题&#xff1b; 4、重要级别&#xff1b;    5、预置…...

FreeSWITCH Ubuntu 18.04 源码编译

应朋友邀请&#xff0c;试了试 FreeSWITCH Ubuntu 18.04 源码编译&#xff0c;交的作业如下&#xff1a; #!/bin/bash####### Ubuntu 18.04 LTS ####### ARM64 ####### FreeSWITCH 1.10.12apt update && \ apt install -y --fix-missing git sed bison build-essentia…...

spring—boot(整合redis)

整合redis 第一步导入数据源 <!--redis--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> RedisConfig&#xff08;默认有RedisTemplate&#…...

Python 包镜像源

阿里云、清华大学和豆瓣之外&#xff0c;还有许多其他的 Python 包镜像源。下面是更新后的代码&#xff0c;增加了更多常用的镜像源&#xff0c;如华为云、腾讯云等 import tkinter as tk from tkinter import messagebox import os# 定义 pip 配置文件路径 pip_config_file …...

Sigrity SPEED2000 Power Ground Noise Simulation模式如何进行电源阻抗仿真分析操作指导(一)-无电容

Sigrity SPEED2000 Power Ground Noise Simulation模式如何进行电源阻抗仿真分析操作指导(一)-无电容 Sigrity Power Ground Noise Simulation模式同样可以用来观测电源网络的自阻抗&#xff0c;以下图为例进行说明 2D 视图 3D view 本例要观测的是U17端口处的自阻抗&#xff0…...

Unity3D ASTC贴图压缩格式详解

一、技术详解 ASTC&#xff08;Adaptive Scalable Texture Compression&#xff09;是一种先进的纹理压缩格式&#xff0c;特别适用于OpenGL ES 3.0及更高版本。ASTC在2012年推出&#xff0c;自那以后已经成为游戏开发中重要的纹理压缩技术。它不仅在iOS设备上得到广泛应用&am…...

Docker的轻量级可视化工具Portainer

docker目录 1 Portainer官方链接2 是什么&#xff1f;3 下载安装4 跑通一次5 后记 1 Portainer官方链接 这里给出portainer的官方链接&#xff1a;https://www.portainer.io/ portainer安装的官方链接&#xff1a;https://docs.portainer.io/start/install-ce/server/docker/l…...

udp丢包问题

udp或者tcp丢包问题监测方式&#xff1a; netstat -su 问题分析&#xff1a; 1. 内存 2. cpu 3. 发送接收缓存 动画图解 socket 缓冲区的那些事儿-CSDN博客...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...