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） 所以想把图窗固定在某个位置 显然更…...
OpCore-Simplify：黑苹果配置的终极简化方案——从复杂到简单的革命性转变
OpCore-Simplify：黑苹果配置的终极简化方案——从复杂到简单的革命性转变 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否曾经因为黑…...
Cosmos-Reason1-7B部署教程：Docker镜像免配置+7860端口快速启用
Cosmos-Reason1-7B部署教程：Docker镜像免配置7860端口快速启用 1. 项目概述 Cosmos-Reason1-7B是NVIDIA推出的7B参数多模态视觉语言模型(VLM)，专注于物理理解和思维链推理能力。作为Cosmos世界基础模型平台的核心组件，它能够处理图像和视频…...
有偿求助 如何使用openclaw 来实现办公自动化
本地部署openclaw 需要让他帮我下载企业微信里的客户聊天记录...
PROJECT MOGFACE与Dify平台集成：快速构建无需编码的AI智能体应用
PROJECT MOGFACE与Dify平台集成：快速构建无需编码的AI智能体应用 最近在折腾AI应用开发的朋友，可能都有过类似的烦恼：手头有一个效果不错的模型，比如我们团队部署的PROJECT MOGFACE，想把它变成一个能对外服务的、功能…...
OpCore-Simplify：从3天手动调试到3步智能配置，黑苹果配置的自动化革命
OpCore-Simplify：从3天手动调试到3步智能配置，黑苹果配置的自动化革命 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 想象一下…...
RMBG-2.0多场景落地指南：短视频素材制作+电商主图抠图完整流程
RMBG-2.0多场景落地指南：短视频素材制作电商主图抠图完整流程 想快速给商品换个背景，又怕抠图不干净？想给短视频做个炫酷的片头，却被复杂的背景处理劝退？今天，咱们就来聊聊一个能让你彻底告别繁琐抠图的神…...
仅限前500位开发者获取：20年MCP协议老兵手写《Python服务器模板源码认知地图》PDF+可执行调试镜像
第一章：MCP协议核心原理与Python服务器模板设计哲学MCP（Model Control Protocol）是一种轻量级、面向模型交互的双向通信协议，专为AI代理系统与外部工具服务之间的结构化指令交换而设计。其核心在于以JSON-RPC 2.0为传输语义基础&a…...
TTI-Chicago等机构突破性研究：AI学会了一笔一划创作矢量草图
这项由芝加哥丰田技术研究院（TTI-Chicago）、芝加哥大学和麻省理工学院联合开展的研究发表于2026年，论文编号为arXiv:2603.19500v1。有兴趣深入了解技术细节的读者可以通过该编号查询完整论文。当我们看到一位画家创作时，他们通常不…...
Phi-3-mini-4k-instruct-gguf开发者案例：为微信小程序后端提供的轻量API服务
Phi-3-mini-4k-instruct-gguf开发者案例：为微信小程序后端提供的轻量API服务 1. 项目背景与需求 在开发微信小程序时，我们经常需要为前端提供智能文本处理能力，比如自动生成商品描述、智能客服回复、内容摘要等。传统方案要么需要调用第三方…...
Blender 3MF插件终极指南：从零开始掌握3D打印文件格式
Blender 3MF插件终极指南：从零开始掌握3D打印文件格式 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 3MF（3D Manufacturing Format）格…...