Steam 灵感的游戏卡悬停效果
先看效果：
再看代码（查看更多）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Steam 灵感的游戏卡悬停效果</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #353540;}.l-container {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 30px;width: 100%;max-width: 1200px;padding: 30px;}@media screen and (max-width: 760px) {.l-container {grid-template-columns: repeat(2, 1fr);}}.b-game-card {position: relative;z-index: 1;width: 100%;padding-bottom: 150%;perspective: 1000px;}.b-game-card__cover {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);background-size: cover;perspective-origin: 50% 50%;transform-style: preserve-3d;transform-origin: top center;will-change: transform;transform: skewX(0.001deg);transition: transform 0.35s ease-in-out;}.b-game-card__cover::after {display: block;content: "";position: absolute;z-index: 100;top: 0;left: 0;width: 100%;height: 120%;background: linear-gradient(226deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0) 60%);transform: translateY(-20%);will-change: transform;transition: transform 0.65s cubic-bezier(0.18, 0.9, 0.58, 1);}.b-game-card:hover .b-game-card__cover {transform: rotateX(7deg) translateY(-6px);}.b-game-card:hover .b-game-card__cover::after {transform: translateY(0%);}.b-game-card::before {display: block;content: "";position: absolute;top: 5%;left: 5%;width: 90%;height: 90%;background: rgba(0, 0, 0, 0.5);box-shadow: 0 6px 12px 12px rgba(0, 0, 0, 0.4);will-change: opacity;transform-origin: top center;transform: skewX(0.001deg);transition: transform 0.35s ease-in-out, opacity 0.5s ease-in-out;}.b-game-card:hover::before {opacity: 0.6;transform: rotateX(7deg) translateY(-6px) scale(1.05);}</style>
</head>
<body>
<div class="l-container"><div class="b-game-card"><div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_1.jpg);"></div></div><div class="b-game-card"><div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_2.jpg);"></div></div><div class="b-game-card"><div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_3.jpg);"></div></div><div class="b-game-card"><div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_4.jpg);"></div></div>
</div>
</body>
</html>
相关文章：
Steam 灵感的游戏卡悬停效果
先看效果： 再看代码（查看更多）： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Steam 灵感的游戏卡悬停效果</title><style>* {margin: …...
[Openwrt]一步一步搭建MT7981A uboot、atf、openwrt-21.02开发环境操作说明
安装ubuntu-18.04 软件安装包 ubuntu-18.04-desktop-amd64.iso 修改ubuntu管理员密码 sudo passwd [sudo] password for w1804: Enter new UNIX password: Retype new UNIX password: passwd: password updated successfully 更新ubuntu源 备份源 sudo cp /etc/apt/so…...
Unity C# 之 Azure 微软SSML语音合成TTS流式获取音频数据以及表情嘴型 Animation 的简单整理
Unity C# 之 Azure 微软SSML语音合成TTS流式获取音频数据以及表情嘴型 Animation 的简单整理 目录 Unity C# 之 Azure 微软SSML语音合成TTS流式获取音频数据以及表情嘴型 Animation 的简单整理 一、简单介绍 二、实现原理 三、注意事项 四、实现步骤 五、关键代码 一、简…...
安全学习DAY16_信息打点-CDN绕过
信息打点-CDN绕过 文章目录 信息打点-CDN绕过本节思维导图相关链接&工具站&项目工具前置知识：CDN配置：配置1：加速域名-需要启用加速的域名配置2：加速区域-需要启用加速的地区配置3：加速类型-需要启用加速的资源…...
genism word2vec方法
文章目录 概述使用示例模型的保存与使用训练参数详解（[原链接](https://blog.csdn.net/weixin_44852067/article/details/130221655)）语料库训练 概述 word2vec是按句子来处理的Sentences(句子们) 使用示例 from gensim.models import Word2Vec #sent…...
vue3自定义样式-路由-axios拦截器
基于vue,vite和elementPlus 基于elementPlus自定义样式 history模式的路由 在根目录配置jsconfig.json，添加json的配置项。输入自动联想到src目录，是根路径的别名拦截器 如果存在多个接口地址，可以配置多个axios实例 数据持久化之后&#x…...
【mysql】事务的四种特性的理解
🌇个人主页：平凡的小苏 📚学习格言：命运给你一个低的起点，是想看你精彩的翻盘，而不是让你自甘堕落，脚下的路虽然难走，但我还能走，比起向阳而生，我更想尝试逆风…...
C++中List的实现
前言 数据结构中，我们了解到了链表，但是我们使用时需要自己去实现链表才能用，但是C出现了list将这一切皆变为现。list可以看作是一个带头双向循环的链表结构，并且可以在任意的正确范围内进行增删查改数据的容器。list容器一样也是…...
ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总
目录 一、树形表格如何添加序号体现层级关系 二、树形表格展开收缩图标位置放置，设置指定列 三、表单嵌套树形表格的校验问题以及如何给校验rules传参 普通表格绑定如下：这种方法只能校验表格的第一层，树形需要递归设置子级节点prop。 树…...
解决“Unable to start embedded Tomcat“错误的完整指南
系列文章目录 文章目录 系列文章目录前言一、查看错误信息二、确认端口是否被占用三、检查依赖版本兼容性四、清理临时文件夹五、检查应用程序配置六、检查依赖冲突七、查看异常堆栈信息八、升级或降级Spring Boot版本总结前言 在使用Spring Boot开发应用程序时，有时可能会遇…...
JVS开源基础框架：平台基本信息介绍
JVS是面向软件开发团队可以快速实现应用的基础开发脚手架，主要定位于企业信息化通用底座，采用微服务分布式框架，提供丰富的基础功能，集成众多业务引擎，它灵活性强，界面化配置对开发者友好，底层容…...
C++ - max_element
在C中，要找到一个数组中的最大元素，可以使用 std::max_element 函数。以下是使用步骤： 包含 <algorithm> 头文件，这里定义了 std::max_element 函数。声明一个数组，并初始化它。使用 std::max_element 函数来查找…...
聚隆转债上市价格预测
聚隆转债 基本信息 转债名称：聚隆转债，评级：A，发行规模：2.185亿元。 正股名称：南京聚隆，今日收盘价：16.64元，转股价格：18.27元。 当前转股价值 转债面值 / 转…...
pytest自动生成测试类 demo
一、 pytest自动生成测试类 demo # -*- coding:utf-8 -*- # Author: 喵酱 # time: 2023 - 08 -15 # File: test4.py # desc: import pytest import unittest# 动态生成测试类def create_test_class(class_name:str, test_cases:list) -> type:"""生成测试类…...
服务器卡顿了该如何处理
服务器卡顿了该如何处理 当Windows系统的服务器出现卡顿问题时，以下是一些常见的故障排除步骤： 1.检查网络连接：确保服务器的网络连接正常。检查网络设备、交换机、防火墙等设备，确保它们正常运行。尝试通过其他计算机访问服务器…...
常量对象 只能调用 常成员函数
一、遇到问题： //函数声明 void ReadRanFile(CString szFilePath); const CFvArray<CString>& GetPanelGrade() const { return m_fvArrayPanelGrade; } //在另一个文件中调用ReadtRanFile这个函数 const CFsJudConfig& psJudConfig m_pFsDefJu…...
Progressive-Hint Prompting Improves Reasoning in Large Language Models
本文是LLM系列的文章，针对《Progressive-Hint Prompting Improves Reasoning in Large Language Models》的翻译。 渐进提示改进了大型语言模型中的推理 摘要1 引言2 相关工作3 渐进提示Prompting4 实验5 结论6 实现细节7 不足与未来工作8 广泛的影响9 具有不同提示…...
mysql中INSERT INTO ... ON DUPLICATE KEY UPDATE的用法，以及与REPLACE INTO 语句用法的异同
INSERT INTO ... ON DUPLICATE KEY UPDATE 是 MySQL 中一种用于插入数据并处理重复键冲突的语法。与之相似的还有 REPLACE INTO 语句。以下是它们的用法和异同点的详细说明： 一、INSERT INTO ... ON DUPLICATE KEY UPDATE INSERT INTO ... ON DUPLICATE KEY UPDAT…...
wireshark 实用过滤表达式（针对ip、协议、端口、长度和内容）
wireshark 实用过滤表达式（针对ip、协议、端口、长度和内容） 1. 关键字 “与”：“eq” 和 “”等同，可以使用 “and” 表示并且， “或”：“or”表示或者。 “非”：“!" 和 "not”…...
MATLAB图形窗口固定
起因是上次作图的时候写了： clc clear close all 这三个典型的刷新语句 清空工作区、命令行并且关闭图窗 就导致每次我把图窗拉到合适的位置观察，再一次点击运行都会重新刷新在出生点（x） 所以想把图窗固定在某个位置 显然更…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...
（一）单例模式
一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中，经常会遇到端口被占用的问题（如 8080、3306 等常用端口）。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口，帮助你高效解决此类问题。 一、准…...