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

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>

相关文章:

3D角色展示

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>3D卡片悬停</title><style>font-face {font-family: "Exoct";src: url("htt…...

前端面试:【Angular】打造强大Web应用的全栈框架

嗨&#xff0c;亲爱的Angular探险家&#xff01;在前端开发的旅程中&#xff0c;有一个全栈框架&#xff0c;那就是Angular。Angular提供了模块化、组件化、依赖注入、路由和RxJS等特性&#xff0c;助力你构建强大、可扩展的Web应用。 1. 什么是Angular&#xff1f; Angular是…...

数据结构:栈和队列

文章目录 一、栈1.栈的概念及结构1.栈的概念及结构2.栈的实现 2.栈的顺序表实现1.栈的结构体和实现的功能函数2.栈的初始化&#xff0c;入栈和出栈操作3.栈的其他操作 3.栈的链表实现1.栈的结构体和实现的功能函数2.栈功能函数的实现 二、队列1.队列的概念及结构1.队列的概念及…...

SpringCloud Gateway服务网关的介绍与使用

目录 1、网关介绍2、SpringCloudGateway工作原理3、三大组件3.1 、Route&#xff08;路由&#xff09;3.2、断言 Predicate3.3、过滤器 filter 4、Gateway整合nacos的使用4.1 、引入依赖4.2、 编写基础类和启动类4.3、 编写基础配置和路由规则4.4 、测试结果 1、网关介绍 客户…...

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

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

每日一博 - MPP(Massively Parallel Processing,大规模并行处理)架构

文章目录 概述优点缺点小结 概述 MPP&#xff08;Massively Parallel Processing&#xff0c;大规模并行处理&#xff09;架构是一种常见的数据库系统架构&#xff0c;主要用于提高数据处理性能。它通过将多个单机数据库节点组成一个集群&#xff0c;实现数据的并行处理。 在 …...

ssh框架原理及流程

1.hibernate工作原理&#xff1a; 读取并解析配置文件读取并解析映射信息&#xff0c;创建sessionFactory打开session创建事务transaction持久化操作提交事务关闭session关闭sessionFactory 为什么使用&#xff1a; 对JDBC访问数据库的代码做了封装&#xff0c;大大简化了数据…...

eslint 配置和用法

在一个使用Webpack的项目中配置ESLint&#xff0c;你可以按照以下步骤操作&#xff1a; 首先&#xff0c;你需要在你的项目中安装ESLint和对应的Webpack loader。你可以使用npm或者yarn来安装。在你的项目根目录下打开终端&#xff0c;然后运行以下命令&#xff1a; 使用npm&…...

字符设备驱动实例(PWM和RTC)

目录 五、PWM 六、RTC 五、PWM PWM(Pulse Width Modulation&#xff0c;脉宽调制器)&#xff0c;顾名思义就是一个输出脉冲宽度可以调整的硬件器件&#xff0c;其实它不仅脉冲宽度可调&#xff0c;频率也可以调整。它的核心部件是一个硬件定时器&#xff0c;其工作原理可以用…...

Ribbon 源码分析

Ribbon 源码分析 Ribbon Debug 分析 断点 LoadBalancerInterceptor LoadBalancerInterceptor 实现了 ClientHttpRequestInterceptor 接口&#xff0c;重写了其中的 intercept 方法&#xff0c;用来拦截请求&#xff1b; 获取原始的 uri 和 服务名&#xff0c;调用 LoadBalanc…...

【1-3章】Spark编程基础(Python版)

课程资源&#xff1a;&#xff08;林子雨&#xff09;Spark编程基础(Python版)_哔哩哔哩_bilibili 第1章 大数据技术概述&#xff08;8节&#xff09; 第三次信息化浪潮&#xff1a;以物联网、云计算、大数据为标志 &#xff08;一&#xff09;大数据 大数据时代到来的原因…...

宇宙原理:黑洞基础。

宇宙原理&#xff1a;黑洞基础TOC 黑洞的数理基础&#xff1a;一个由满数组成的数盘&#xff0c;经过自然演进&#xff0c;将会逐步稀疏化、最终会向纯数方案发展&#xff1b;纯数方案虽然只有{2}、无数&#xff08;虚拟&#xff09;、{0,1,2,3}&#xff08;虚拟&#xff09;、…...

分类预测 | MATLAB实现SCNGO-CNN-LSTM-Attention数据分类预测

分类预测 | MATLAB实现SCNGO-CNN-LSTM-Attention数据分类预测 目录 分类预测 | MATLAB实现SCNGO-CNN-LSTM-Attention数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.SCNGO-CNN-LSTM-Attention数据分类预测程序&#xff0c;改进算法&#xff0c;融合正余弦和…...

Android学习之路(7) Frament

Fragment 表示应用界面中可重复使用的一部分。fragment 定义和管理自己的布局&#xff0c;具有自己的生命周期&#xff0c;并且可以处理自己的输入事件。fragment 不能独立存在。它们必须由 activity 或其他 fragment 托管。fragment 的视图层次结构会成为宿主的视图层次结构的…...

metallb , istio ingress 部署httpbin使用例子

安装metaillb,参考&#xff1a;Kubernetes的负载均衡方案&#xff1a;MetalLB - 文章详情 wget https://raw.githubusercontent.com/metallb/metallb/v0.13.7/config/manifests/metallb-frr.yaml -O metallb.yaml kubectl apply -f metallb-frr.yaml 配置负载均衡ip池 apiVe…...

基于swing的销售管理系统java仓库库存信息jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的销售管理系统 系统有1权限&#xff1a;管…...

FreeCAD傻瓜式教程之约束设定和构建实体、开孔、调整颜色等

本内容基于官方教程中的绘制简单的零件中的体会&#xff0c;在初次绘制的时候&#xff0c;总是无法完成&#xff0c;几经尝试才发现其关键点所在&#xff0c;以此文记录&#xff0c;用以被查资料&#xff0c;同时也希望能够帮到纯白新手快速熟悉该软件的绘图方法。 一、. 打开…...

代码随想录算法训练营day41 | 343. 整数拆分,96. 不同的二叉搜索树

目录 343. 整数拆分 96. 不同的二叉搜索树 343. 整数拆分 类型&#xff1a;动态规划 难度&#xff1a;medium 思路&#xff1a; dp[i]所用的拆分方法至少已经拆分了两次&#xff0c;比如dp[2]1&#xff0c;小于2&#xff0c;在大于2的数中&#xff0c;最后的2是不会拆的。 …...

飞天使-k8sv1.14二进制安装

文章目录 安装前准备安装前设置分发脚本 开始安装k8s集群cfssl 安装部署kubectl命令行工具创建admin证书和私钥创建kubeconfig文件部署ETCD集群部署Flannel网络kube-apiserver 高可用KeepLived 部署部署master节点部署高可用kube-controller-manager集群kube-controller-manage…...

TypeScript封装Axios

TypeScript封装Axios Axios的基本使用 因axios基础使用十分简单&#xff0c;可参考axios官方文档&#xff0c;这里不在介绍他基本用法&#xff0c;主要讲解拦截器。 拦截器主要分为两种&#xff0c;请求拦截器和响应拦截器。 请求拦截器&#xff1a;请求发送之前进行拦截&…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...