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>

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

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

相关文章

构建高效外卖系统平台:从需求到实现

随着科技的不断进步和人们生活节奏的加快&#xff0c;外卖成为了越来越多人的饮食选择。为了满足这一需求&#xff0c;开发一套高效的外卖系统平台变得尤为重要。本文将从需求分析开始&#xff0c;逐步引导您了解如何开发一套完整的外卖系统平台。 第一步&#xff1a;需求分析…

分类预测 | MATLAB实现EVO-CNN多输入分类预测

分类预测 | MATLAB实现EVO-CNN多输入分类预测 目录 分类预测 | MATLAB实现EVO-CNN多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现EVO-CNN多输入分类预测 2.代码说明&#xff1a;量谷优化卷积神经网络的数据分类预测&#xff1a;要求于Matlab …

【hadoop】windows上hadoop环境的搭建步骤

文章目录 前言基础环境下载hadoop安装包下载hadoop在windows中的依赖配置环境变量 Hadoop hdfs搭建创建hadfs数据目录修改JAVA依赖修改配置文件初始化hdfs namenode启动hdfs 前言 在大数据开发领域中&#xff0c;不得不说说传统经典的hadoop基础计算框架。一般我们都会将hadoo…

计算机视觉目标检测性能指标

目录 精确率&#xff08;Precision&#xff09;和召回率&#xff08;Recall&#xff09; F1分数&#xff08;F1 Score&#xff09; IoU&#xff08;Intersection over Union&#xff09; P-R曲线&#xff08;Precision-Recall Curve&#xff09;和 AP mAP&#xff08;mean…

Leetcode-每日一题【剑指 Offer 30. 包含min函数的栈】

题目 定义栈的数据结构&#xff0c;请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中&#xff0c;调用 min、push 及 pop 的时间复杂度都是 O(1)。 示例: MinStack minStack new MinStack(); minStack.push(-2); minStack.push(0); minStack.push(-3); minStack…

【mysql】事务的四种特性的理解

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

TOMCAT基础

tomcat是一个基于Java开发的&#xff0c;开放源代码的web应用服务器。它可以解析html页面中的java代码&#xff0c;执行动态请求&#xff0c;实现动态页面。核心功能是将收到的http请求处理并转发给适当的servlet来处理&#xff0c;然后将响应返回给客户端。 优点 1&#xff0c…

Django实现音乐网站 ⑼

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是后台对专辑、首页轮播图原有功能的基础上进行部分功能实现和显示优化。 目录 专辑功能优化 新增编辑 专辑语种改为下拉选项 添加单曲优化显示 新增单曲多选 更新歌手专辑数、专辑单曲数 获取歌手专辑数 保…

【并发编程】自研数据同步工具的优化:创建线程池多线程异步去分页调用其他服务接口获取海量数据

文章目录 场景&#xff1a;解决方案 场景&#xff1a; 前段时间在做一个数据同步工具&#xff0c;其中一个服务的任务是调用A服务的接口&#xff0c;将数据库中指定数据请求过来&#xff0c;交给kafka去判断哪些数据是需要新增&#xff0c;哪些数据是需要修改的。 刚开始的设…

Character Animation With Direct3D 读书笔记

角色动画简介 2D动画&#xff1a;循环播放多张图片 3D动画&#xff1a; 骨骼动画、变形动画 DirectX入门 Win32 应用程序 Application类&#xff1a;处理主程序循环&#xff0c;图形设备的初始化 Init&#xff1a;加载资源并创建图形设备Update&#xff1a;更新游戏世界&am…

Vue中子组件修改父组件传来的Prop值

vue中子组件不能直接修改父组件传来的prop值&#xff0c;Prop 是一种传递数据的机制&#xff0c;父组件通过 Prop 向子组件传递数据&#xff0c;子组件通过 Props 接收父组件传递过来的数据&#xff0c;这些数据被封装成一个个解构体形式的对象&#xff0c;不能直接进行修改。这…

React 18 更新 state 中的对象

参考文章 更新 state 中的对象 state 中可以保存任意类型的 JavaScript 值&#xff0c;包括对象。但是&#xff0c;不应该直接修改存放在 React state 中的对象。相反&#xff0c;当想要更新一个对象时&#xff0c;需要创建一个新的对象&#xff08;或者将其拷贝一份&#xf…

图像去雨、去雪、去雾论文学习记录

All_in_One_Bad_Weather_Removal_Using_Architectural_Search 这篇论文发表于CVPR2020&#xff0c;提出一种可以应对多种恶劣天气的去噪模型&#xff0c;可以同时进行去雨、去雪、去雾操作。但该部分代码似乎没有开源。 提出的问题&#xff1a; 当下的模型只能针对一种恶劣天气…

【ARM 嵌入式 编译系列 4.1 -- GCC 编译属性 likely与unlikely 学习】

文章目录 GCC likely与unlikely 介绍linux 内核中的 likely/unlikely上篇文章:ARM 嵌入式 编译系列 4 – GCC 编译属性 __read_mostly 介绍 下篇文章: ARM 嵌入式 编译系列 4.2 – GCC 链接规范 extern “C“ 介绍 GCC likely与unlikely 介绍 likely 和 unlikely 是GCC编译器…

JDBC连接数据库(mysql)

准备jar包 官网下载即可&#xff0c;这里提供两个我下载过的jar包&#xff0c;供使用 链接&#xff1a;https://pan.baidu.com/s/1snikBD1kEBaaJnVktLvMdQ?pwdrwwq 提取码&#xff1a;rwwq eclipse导 jar包: 导入成功会有如下所示&#xff1a; ---------------------------…

个人开发中常见单词拼错错误纠正

个人开发中常见单词拼错错误纠正 前置说明参考地址后端开发相关前端开发相关客户端开发相关大数据/云计算相关工具或软件相关 前置说明 单词太多啦, 我这里只列表我个人见得比较多的, 我没见过就不列举了. 有错误或想补充的可以提交在原仓库提交Pull Request. &#x1f601; …

JavaScript面试题(二)

31、http 的理解 ? HTTP 协议是超文本传输协议&#xff0c;是客户端浏览器或其他程序“请求”与 Web 服务器响应之间的应用层通信协议。HTTPS主要是由HTTPSSL构建的可进行加密传输、身份认证的一种安全通信通道。 32、http 和 https 的区别 ? 1、https协议需要到ca申请证书…

基于DEM tif影像的插值平滑和tif纹理贴图构建方法

文章目录 基于CDT的无缝融合基于拓扑纠正的地上-地表的Bool运算融合 基于CDT的无缝融合 准备数据是一个10米分辨率的Tif影像&#xff0c;直接用于生成DEM会十分的不平滑。如下图所示&#xff0c;平滑前后的对比效果图差异&#xff1a; 基于ArcGIS的DEM平滑插值 等值线生成&…

Oracle增加列

在Oracle数据库中&#xff0c;使用ALTER TABLE语句可以很方便地为表增加新列。在进行操作时&#xff0c;需要谨慎考虑新列的数据类型、名称、默认值、约束等因素&#xff0c;以确保操作的安全性和可靠性。同时&#xff0c;也需要注意备份数据、避免在高峰期进行操作等注意事项 …

GPT内功心法:搜索思维到GPT思维的转换

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…