<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css炉石传说风格卡悬停</title>
<script src="static/js/jquery-1.10.2.js"></script>
<style>
html,
body {
height: 100%;
}
body {
background: radial-gradient(#333, #111);
overflow: hidden;
}
.cards {
bottom: 0;
display: flex;
height: 150px;
padding: 0 50px;
justify-content: center;
position: fixed;
left: 0;
right: 0;
}
.card {
height: 150px;
margin: 0 -25px;
position: relative;
width: 100px;
}
.card:after {
bottom: 0;
content: "";
left: -60px;
position: absolute;
right: -60px;
top: 0px;
z-index: 10;
}
.card-face {
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) transform;
}
.card-face:after {
-webkit-animation: none;
animation: none;
background: #fff;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.card-label {
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 24px;
font-weight: bold;
letter-spacing: -0.025em;
padding: 15px 0 0 15px;
}
.card:nth-child(1) .card-face {
background: linear-gradient(-135deg, #ff9999, #da0b0b);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 153, 0.75);
transform: translateY(45px) rotate(-28.125deg);
}
.card:nth-child(1) .card-face .card-label {
color: #db0000;
text-shadow: -0.025em 0.025em 0 #ff8080;
}
.card:nth-child(1):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 153, 153, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(1):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(1):hover:after {
top: -175px;
}
.card:nth-child(2) .card-face {
background: linear-gradient(-135deg, #ff99d6, #da0b87);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 214, 0.75);
transform: translateY(35px) rotate(-21.875deg);
}
.card:nth-child(2) .card-face .card-label {
color: #db0084;
text-shadow: -0.025em 0.025em 0 #ff80cc;
}
.card:nth-child(2):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 153, 214, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(2):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(2):hover:after {
top: -175px;
}
.card:nth-child(3) .card-face {
background: linear-gradient(-135deg, #eb99ff, #b10bda);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(235, 153, 255, 0.75);
transform: translateY(25px) rotate(-15.625deg);
}
.card:nth-child(3) .card-face .card-label {
color: #af00db;
text-shadow: -0.025em 0.025em 0 #e680ff;
}
.card:nth-child(3):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(235, 153, 255, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(3):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(3):hover:after {
top: -175px;
}
.card:nth-child(4) .card-face {
background: linear-gradient(-135deg, #ad99ff, #350bda);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(173, 153, 255, 0.75);
transform: translateY(15px) rotate(-9.375deg);
}
.card:nth-child(4) .card-face .card-label {
color: #2c00db;
text-shadow: -0.025em 0.025em 0 #9980ff;
}
.card:nth-child(4):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(173, 153, 255, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(4):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(4):hover:after {
top: -175px;
}
.card:nth-child(5) .card-face {
background: linear-gradient(-135deg, #99c2ff, #0b5eda);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 194, 255, 0.75);
transform: translateY(5px) rotate(-3.125deg);
}
.card:nth-child(5) .card-face .card-label {
color: #0058db;
text-shadow: -0.025em 0.025em 0 #80b3ff;
}
.card:nth-child(5):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(153, 194, 255, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(5):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(5):hover:after {
top: -175px;
}
.card:nth-child(6) .card-face {
background: linear-gradient(-135deg, #99ffff, #0bdada);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 255, 255, 0.75);
transform: translateY(5px) rotate(3.125deg);
}
.card:nth-child(6) .card-face .card-label {
color: #00dbdb;
text-shadow: -0.025em 0.025em 0 #80ffff;
}
.card:nth-child(6):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(153, 255, 255, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(6):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(6):hover:after {
top: -175px;
}
.card:nth-child(7) .card-face {
background: linear-gradient(-135deg, #99ffc2, #0bda5e);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 255, 194, 0.75);
transform: translateY(15px) rotate(9.375deg);
}
.card:nth-child(7) .card-face .card-label {
color: #00db58;
text-shadow: -0.025em 0.025em 0 #80ffb3;
}
.card:nth-child(7):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(153, 255, 194, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(7):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(7):hover:after {
top: -175px;
}
.card:nth-child(8) .card-face {
background: linear-gradient(-135deg, #adff99, #35da0b);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(173, 255, 153, 0.75);
transform: translateY(25px) rotate(15.625deg);
}
.card:nth-child(8) .card-face .card-label {
color: #2cdb00;
text-shadow: -0.025em 0.025em 0 #99ff80;
}
.card:nth-child(8):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(173, 255, 153, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(8):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:nth-child(8):hover:after {
top: -175px;
}
.card:nth-child(9) .card-face {
background: linear-gradient(-135deg, #ebff99, #b1da0b);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(235, 255, 153, 0.75);
transform: translateY(35px) rotate(21.875deg);
}
.card:nth-child(9) .card-face .card-label {
color: #afdb00;
text-shadow: -0.025em 0.025em 0 #e6ff80;
}
.card:nth-child(9):hover .card-face {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(235, 255, 153, 0.75);
transform: translateY(-100px) rotate(0deg) scale(2);
transition-duration: 0ms;
z-index: 5;
}
.card:nth-child(9):hover .card-face:after {
-webkit-animation: fade 250ms ease-out forwards;
animation: fade 250ms ease-out forwards;
}
.card:n
css3风格卡片悬停效果.rar （2个子文件） 
hjiaoben108 
index.html 10KB static js 
jquery-1.10.2.js 173B资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5850
最新资源
- yolo算法-动物数据集-8944张图像带标签-自行车-背景-大象-豹-牛-熊-鹿-马-摩托车-猎豹-福克斯-猴子-美洲虎-太阳能电池板-老虎-犀牛-狮子-山羊-人-狗-天鱼-鸟.zip
- WordPress在线社交问答社区主题Discy V3.8.1
- 公开整理-农业科技创新数据集（2010-2022）.xlsx
- 基于Python卷积神经网络人脸识别驾驶员疲劳检测与预警系统设计毕业源码案例设计
- yolo算法-麻将数据集-2205张图像带标签-绿色-北-南方-西-白色-万-东-红色.zip
- yolo算法-麻将检测数据集-13687张图像带标签-西风.zip
- yolo算法-跌倒检测数据集-10787张图像带标签-检测到跌倒.zip
- 软考冲刺资源之软考系统架构设计师笔记一起努力吧
- delphi 读取多种格式的图像,并实现互转
- Wordpress简约大气昼夜切换导航主题模板NDNAV主题
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
