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轴上旋转。

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

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

相关文章

微控制器(MCU)如何运行存储在Flash的程序???

忙&#xff0c;太忙了&#xff01;&#xff01;&#xff01;忙完就好了。MCU运行不也就如此&#xff1f;在微控制器单元&#xff08;MCU&#xff09;中&#xff0c;我们所编写的程序时通常是存储在闪存&#xff08;Flash&#xff09;中。当MCU启动时&#xff0c;它会从闪存中读…

yolov8涨点系列之引入CBAM注意力机制

文章目录 YOLOv8 中添加注意力机制 CBAM 具有多方面的好处特征增强与选择通道注意力方面空间注意力方面 提高模型性能计算效率优化&#xff1a; yolov8增加CBAM具体步骤CBAM代码(1)在__init.pyconv.py文件的__all__内添加‘CBAM’(2)conv.py文件复制粘贴CBAM代码(3)修改task.py…

如何无缝更换WordPress主题:关键步骤详解

更换WordPress主题对于希望刷新网站外观或改善用户体验的站长来说&#xff0c;是一项常见但不容忽视的任务。无论是为了提升性能还是实现新的设计风格&#xff0c;在更换主题时&#xff0c;确保不遗漏任何重要细节至关重要。本文将详细介绍更换WordPress主题的关键步骤&#xf…

推荐一款PowerPoint转Flash工具:iSpring Suite

iSpring Suite是一款PowerPoint转Flash工具&#xff0c;使用iSpring Suite 8可以轻松的将PPT演示文档转换为对Web友好的Flash影片格式。软件界面简洁&#xff0c;使用方便。为什么要转换成flash格式呢?Flash格式的最大特点是体积小巧、易于分发&#xff0c;兼容所有的操作系统…

【案例】故障雪花屏

开发平台&#xff1a;Unity 6.0 开发工具&#xff1a;Shader Graph 参考视频&#xff1a;【U2D Shader Graph】❄️雪❄️花❄️屏❄️   一、效果图 二、Shader Graph 路线图 三、案例分析 核心思路&#xff1a;雪花屏幕效果 &#xff08;混合&#xff09; 原图像 最终图像…

ffplay 实现视频流中音频的延迟

ffplay -rtsp_transport tcp -i rtsp://admin:1234qwer192.168.1.64:554/Streaming/Channels/101 -vn -af "adelay5000|5000"在这个命令中&#xff1a; -vn 参数表示只播放音频。 -af "adelay5000|5000" 参数表示将音频延迟5000毫秒&#xff08;即5秒&…

科技资讯|谷歌Play应用商店有望支持 XR 头显,AR / VR设备有望得到发展

据 Android Authority 报道&#xff0c;谷歌似乎正在为其 Play 商店增加对 XR 头显的支持。该媒体在 Play 商店的代码中发现了相关的线索&#xff0c;包括一个代表头显的小图标以及对“XR 头显”的提及。 谷歌也可能改变了此前拒绝将 Play 商店引入 Meta Quest 头显的决定。今…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具&#xff0c;主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色&#xff08;通常是绿幕或蓝幕的颜色&#xff09;&#xff0c;即可以将该颜色的像素设为透明&#xff0c;实现主体与…

Git使用指南

目录 工作机制基本框架:流程图 基本命令分支操作远程仓库本地仓库关联远程仓库 参考 工作机制 基本框架: Workspace&#xff1a;开发者工作区&#xff0c;也就是你当前写代码的目录&#xff0c;它一般保持的是最新仓库代码。Index / Stage&#xff1a;暂存区&#xff0c;最早…

计算机网络:简述LAN口模式下NAT和代理的区别

LAN口模式 NAT和代理的区别 LAN口模式下的NAT和代理的区别主要体现在定义、功能和应用场景上。 # NAT和代理的定义和功能 ‌NAT&#xff08;网络地址转换&#xff09;‌&#xff1a;NAT是一种网络地址翻译技术&#xff0c;它将内部私有IP地址转换为公网IP地址&#xff0c;使得…

qt QFile详解

1、概述 QFile类是Qt框架中用于读取和写入文本和二进制文件资源的I/O工具类。它继承自QFileDevice类&#xff0c;后者又继承自QIODevice类。QFile类提供了一个接口&#xff0c;允许开发者以二进制模式或文本模式对文件进行读写操作。默认情况下&#xff0c;QFile假定文件内容为…

105. UE5 GAS RPG 搭建主菜单

在这一篇&#xff0c;我们将实现对打开游戏显示的主菜单进行搭建&#xff0c;主菜单将显示游戏主角&#xff0c;游戏名称和进入游戏和退出游戏两个按钮。 搭建菜单场景 我们将主菜单设置为一个单独的场景&#xff0c;前面可以显示对应的UI控件&#xff0c;用于玩家操作&#…

单臂路由技术,eNSP实验讲解

单臂路由技术&#xff0c;eNSP实验讲解 一、简要介绍1、概念2、工作原理3、优点4、缺点5、应用场景举例 二、eNSP仿真实验1、步骤一&#xff1a;2、步骤二&#xff1a;3、步骤三&#xff1a;4、步骤四&#xff1a; 三、总结。 一、简要介绍 1、概念 单臂路由&#xff08;Rout…

机器学习—构建一个神经网络

如何在Tensorflow中构建神经网络&#xff1f; 回到之前的例子&#xff0c;如果你想做钱进支柱&#xff0c;初始化数据x创建第一层&#xff0c;如下图所示计算一个1&#xff0c;然后创建第二层并计算一个2&#xff0c;所以这是一种明确的向前推进的方式。 事实证明&#xff0c;…

JMeter与大模型融合应用之jmeter.properties配置文件新增配置

JMeter与大模型融合应用之jmeter.properties配置文件新增配置 背景 Apache JMeter 是一款流行的开源性能测试工具&#xff0c;它允许用户通过创建和运行多种类型的测试来评估应用程序的性能。jmeter.properties 文件是 JMeter 的主要配置文件之一&#xff0c;用户可以在其中进…

ffmpeg:视频字幕嵌入(GPU加速)

实现方案 参考指令 ffmpeg -i input_video.mp4 -vf "subtitlessubtitles.srt" output_video.mp4 解决因文件名称复杂导致的指令执行失败问题&#xff08;引号给文件框起来&#xff09; ffmpeg -i "A.mp4" -vf "subtitlesB.srt" "c.mp4&qu…

04_CC2530+Uart串口通信

04_CC2530UART串口通信 串口通信基本概念 串行通信: 数据字节一位位地依次传送的通信方式, 串行通信的速度慢, 但用的传输线条数少, 成本低&#xff0c;适用于远距离的数据传送并行通信: 数据字节的各位同事传送的通信方式, 优点是数据传送速度快, 缺点是占用的传输线条数多,…

基于SSM社区便民服务管理系统JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

CSS画icon图标系列(一)

目录 前言&#xff1a; 一、向右箭头 1.原理&#xff1a; 2.代码实现 3.结果展示&#xff1a; 二、钟表 1.原理&#xff1a; 2.代码展示&#xff1a; 3.最终效果&#xff1a; 三、小手机 1.原理&#xff1a; 2.代码展示&#xff1a; 3.最后效果&#xff1a; 四、结…

直播系统搭建教程安装说明

需要安装的软件(宝塔【软件商店】中查找安装): 1.PHP7.0 ~ PHP7.3 需要安装的扩展:(宝塔【PHP管理】【安装扩展】中安装) *PDO PHP Extension * MBstring PHP Extension * CURL PHP Extension * Mylsqi PHP Extension * Redis PHP Extension * fileinfo PHP Extension …