3D角色展示

先看效果:在这里插入图片描述
再看代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3D卡片悬停</title><style>@font-face {font-family: "Exoct";src: url("https://assets.codepen.io/1480814/films.EXH_____.ttf")}figure {width: 100%;aspect-ratio: 1;margin: 0 0 60px;padding: 5px 20px 0;box-sizing: border-box;display: grid;grid-template-rows: 100%;cursor: pointer;position: relative;filter: drop-shadow(0 0 20px rgb(0 0 0/50%));}figure:before {content: "";position: absolute;z-index: -1;inset: 0;background: top/cover;transform-origin: bottom;filter: brightness(.9);transition: .5s;}figure:before {background-image: url(https://assets.codepen.io/1480814/necro-back.jpg)}figure + figure:before {background-image: url(https://assets.codepen.io/1480814/druid-bac.jpg)}img {grid-area: 1/1;width: 100%;height: 100%;object-fit: cover;object-position: top;filter: contrast(.8) brightness(.7);place-self: end center;transition: .5s;}figcaption {grid-area: 1/1;width: calc(100% + 40px);font-family: Exoct;color: #fff;font-size: min(32px,5vmin);text-align: center;place-self: end center;transform: perspective(500px) translateY(100%) rotateX(-90deg);backface-visibility: hidden;transform-origin: top;background: #000;transition: .5s;}figure:hover img {width: 130%;height: 255%;filter: contrast(1);}figure:hover::before {filter: brightness(.3);transform: perspective(500px) rotateX(60deg);}figure:hover figcaption{transform: perspective(500px)translateY(100%) rotateX(-30deg);}body {margin: 0;min-height: 100vh;display: grid;grid-auto-flow: column;grid-auto-columns: min(230px,35vmin);place-content: end center;gap: 50px;background:linear-gradient(#0000,rgb(50 50 50 / 88%)),url(https://assets.codepen.io/1480814/diablo-reaper-of-souls-mw-1360x768.jpg) top/cover;}</style>
</head>
<body>
<figure><img src="https://assets.codepen.io/1480814/necro.png" alt="Necromancer"><figcaption>The Necro</figcaption>
</figure>
<figure><img src="https://assets.codepen.io/1480814/druide.png" alt="Druid"><figcaption>The Druid</figcaption>
</figure></body>
</html>

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

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

相关文章

深度学习模型优化:提高训练效率和精度的技巧

文章目录 1. 数据预处理2. 批量归一化&#xff08;Batch Normalization&#xff09;3. 学习率调整4. 提前停止&#xff08;Early Stopping&#xff09;5. 模型压缩与剪枝6. 模型并行与分布式训练7. 自动化超参数调整结论 &#x1f389;欢迎来到AIGC人工智能专栏~探索Java中的静…

记录《现有docker中安装spark3.4.1》

基础docker环境中存储hadoop3--方便后续查看 参考&#xff1a; 实践&#xff1a; export JAVA_HOME/opt/apache/jdk1.8.0_333 export SPARK_MASTER_IP192.168.0.220 export SPARK_WORKER_MEMORY4g export SPARK_WORKER_CORES2 export SPARK_EXECUTOR_MEMORY4g export HADOOP_H…

windows环境 pip安装mysqlclient失败问题记录及解决方案

1.问题记录 > pip install -i https://pypi.douban.com/simple mysqlclient Looking in indexes: https://pypi.douban.com/simple Collecting mysqlclientUsing cached https://pypi.doubanio.com/packages/50/5f/eac919b88b9df39bbe4a855f136d58f80d191cfea34a3dcf96bf5d…

人力资源小程序的设计原则与实现方法

随着移动互联网的快速发展&#xff0c;小程序成为了各行各业推广和服务的新利器。对于人力资源行业来说&#xff0c;开发一款定制化的小程序不仅可以提升服务效率&#xff0c;还可以增强品牌形象和用户粘性。那么&#xff0c;如何定制开发人力资源类的小程序呢&#xff1f;下面…

企业网三层架构实验

一、实验拓扑 二、实验要求 1、内网IP地址172.16.0.0/16合理分配&#xff1b; 2、SW1/2之间互为备份&#xff1b; 3、VRRP/STP/VLAN/TRUNK均使用&#xff1b; 4、所有PC通过DHCP获取IP地址&#xff1b; 三、实验思路 1、配置ISP的IP地址&#xff1b; 2、配置R1的IP地址&…

14-模型 - 增删改查

增: # 1. 找到模型类并创建对象 user User() # 2. 给对象的属性赋值 user.username username user.password password user.phone phone # 3. 将user对象添加到session中 (类似缓存) db.session.add(user) # 4. 提交数据 db.session.commit() 删: # 两种删除:# 1. 逻辑删…

Java并发工具类

JDK并发包中常用并发工具类&#xff1a; CountDownLatch、CyclicBarrier和Semaphore工具类提供了一种并发流程控制的手段&#xff1b; Exchanger工具类则提供了在线程间交换数据的一种手段。 等待多线程完成的CountDownLatch CountDownLatch允许一个或多个线程等待其他线程完成…

FMEA介绍以及在制造业中的应用

在现代制造业中&#xff0c;确保产品质量和流程稳定性是至关重要的任务。为了应对潜在的故障和风险&#xff0c;企业采用了多种方法和工具&#xff0c;其中之一便是故障模式和影响分析&#xff08;FMEA&#xff09;。FMEA是一种系统性、结构化的方法&#xff0c;用于识别潜在的…

ROS2 学习(五)接口,动作

接口 通信双方统一规定好接口。比如图像 img&#xff0c;控制运动的线速度和角速度…… 我们也不用了解具体实现&#xff0c;基本就是了解接口会去用就行。 $ ros2 interface list # 展示所有 interfaces $ ros2 interface show ... # 显示具体一个 interface $ ros2 package…

如何通过tomcat下载映射下载文件

1.1找到tomcat服务器中server.xml文件 !--doBase是静态资源路径位置&#xff0c; path作用相当于设置的key, doBase作用相当于value --> <Context path"/download" docBase"E:\testBackData"></Context>1.2 找到tomcat服务器中web.xml文…

GPT和AI绘图学习【第13期】,chatgpt文案制作引导并写出爆款小红书推文、AI换脸、客服话术回复等

第13期GPT和AI绘图学习班&#xff0c;主要内容包括&#xff1a;ChatGPT文案制作引导并写出爆款小红书推文、分析数据、策划视频脚本、图片扩展、高效修图、产品设计、平面设计、线镐渲染、AI换脸、客服话术回复等。 目录&#xff1a; 1.第1天&#xff1a;运用GPT提高工作效率…

山西电力市场日前价格预测【2023-08-26】

日前价格预测 预测明日&#xff08;2023-08-26&#xff09;山西电力市场全天平均日前电价为287.61元/MWh。其中&#xff0c;最高日前电价为318.26元/MWh&#xff0c;预计出现在19: 30。最低日前电价为246.18元/MWh&#xff0c;预计出现在05: 15。 价差方向预测 1&#xff1a; 实…

MIA文献阅读 ——医学图像处理在慢性肾脏疾病评估中的最新进展【2021】

目录 0 摘要1 引言2 磁共振成像(MRI)2.1 扩散磁共振成像2.1.1 扩散加权成像(DWI)2.1.2 扩散张量成像(DTI) 2.2 血氧水平依赖成像2.3 动脉自旋标记2.4 动态对比增强磁共振成像2.5 T1和T2映射2.6 磁化转移磁共振成像2.7 磁共振弹性成像2.8 其他磁共振成像技术 3 其他成像方式3.1 …

实验三 HBase1.2.6安装及配置

系列文章目录 文章目录 系列文章目录前言一、HBase1.2.6的安装二、HBase1.2.6的配置2.1 单机模式配置2.2 伪分布式模式配置 总结参考 前言 在安装HBase1.2.6之前&#xff0c;需要安装好hadoop2.7.6。 本篇文章参考&#xff1a;HBase2.2.2安装和编程实践指南 一、HBase1.2.6的安…

2023年你需要知道的最佳预算Wi-Fi路由器清单

买新路由器?让我们帮助你挑选一些既有很多功能和性能,又经济实惠的产品。 购买Wi-Fi路由器并不一定要倾家荡产,尤其是如果你不需要一个提供数百Mbps速度的路由器。廉价路由器是一个很好的选择,它包含了许多功能,不会对钱包造成影响。 一、2023年在廉价Wi-Fi路由器中寻找…

Keepalive+LVS群集部署

一、Keepalive概述 keepalived 软件起初是专为 LVS 负载均衡软件设计的&#xff0c;用来管理并监控 LVS集群中各个服务节点的状态&#xff0c;后来又加入了可以实现高可用的 VRRP 功能。因此&#xff0c;keepalived 除了能够管理 LVS集群外&#xff0c;还可以为其他服务&#…

【数据结构练习】单链表OJ题(二)

目录 一、相交链表二、环形链表1三、环形链表2四、链表分割五、复制带随机指针的链表 一、相交链表 题目&#xff1a; 示例&#xff1a; 注意&#xff1a;不能根据节点的值来比较是否相交&#xff0c;而是根据节点在内存中是否指向相同的位置。 例如以上图&#xff1a; 链表…

深入解析:如何打造高效的直播视频美颜SDK

在当今数字化时代&#xff0c;视频直播已经成为人们交流、娱乐和信息传递的重要方式。然而&#xff0c;许多人在直播时都希望能够呈现出最佳的外观&#xff0c;这就需要高效的直播视频美颜技术。本文将深入解析如何打造高效的直播视频美颜SDK&#xff0c;以实现令人满意的视觉效…

Embedding 向量生成GPT数据使用相关

如果使用python3.6的版本&#xff0c;使用pycharm创建工程&#xff0c;那么默认会使用 docx包&#xff0c;这样运行程序会爆异常&#xff0c;突然想起以前请教的一个大神&#xff0c;想当 初&#xff0c;这个问题困扰了我 两天时间&#xff0c;在此记录一下&#xff1a; pytho…

skywalking服务部署

一、前言 Apache SkyWalking 是一个开源的分布式跟踪、监控和诊断系统&#xff0c;旨在帮助用户监控和诊断分布式应用程序、微服务架构和云原生应用的性能和健康状况。它提供了可视化的分析工具&#xff0c;帮助开发人员和运维团队深入了解应用程序的性能、调用链和异常情况 …