css实现卡片悬浮翻转效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现卡片悬浮翻转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    /*     ================================        Best Viewed In Full Page    ================================*//* Hover over a card to flip,can tab too. */@import url('https://fonts.googleapis.com/css?family=Lato');
	/* default */*,*::after,*::before {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
/* body */body {
	min-height:100vh;
	padding:40px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	background:hsl(220,10%,12%);
	font-family:"Lato","Segoe Ui",-apple-system,BlinkMacSystemFont,sans-serif;
}
/* .flip-card-container */.flip-card-container {
	--hue:150;
	--primary:hsl(var(--hue),50%,50%);
	--white-1:hsl(0,0%,90%);
	--white-2:hsl(0,0%,80%);
	--dark:hsl(var(--hue),25%,10%);
	--grey:hsl(0,0%,50%);
	width:310px;
	height:500px;
	margin:40px;
	-webkit-perspective:1000px;
	perspective:1000px;
}
/* .flip-card */.flip-card {
	width:inherit;
	height:inherit;
	position:relative;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	transition:.6s .1s;
}
/* hover state */.flip-card-container:hover .flip-card,.flip-card-container:focus-within .flip-card {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
/* .card-... */.card-front,.card-back {
	width:100%;
	height:100%;
	border-radius:24px;
	background:var(--dark);
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}
/* .card-front */.card-front {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
	z-index:2;
}
/* .card-back */.card-back {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	z-index:1;
}
/* figure */figure {
	z-index:-1;
}
/* figure,.img-bg */figure,.img-bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/* img */img {
	height:100%;
	border-radius:24px;
}
/* figcaption */figcaption {
	display:block;
	width:auto;
	margin-top:12%;
	padding:8px 22px;
	font-weight:bold;
	line-height:1.6;
	letter-spacing:2px;
	word-spacing:6px;
	text-align:right;
	position:absolute;
	top:0;
	right:12px;
	color:var(--white-1);
	background:hsla(var(--hue),25%,10%,.5);
}
/* .img-bg */.img-bg {
	background:hsla(var(--hue),25%,10%,.5);
}
.card-front .img-bg {
	-webkit-clip-path:polygon(0 20%,100% 40%,100% 100%,0 100%);
	clip-path:polygon(0 20%,100% 40%,100% 100%,0 100%);
}
.card-front .img-bg::before {
	content:"";
	position:absolute;
	top:34%;
	left:50%;
	-webkit-transform:translate(-50%,-50%) rotate(18deg);
	transform:translate(-50%,-50%) rotate(18deg);
	width:100%;
	height:6px;
	border:1px solid var(--primary);
	border-left-color:transparent;
	border-right-color:transparent;
	transition:.1s;
}
.card-back .img-bg {
	-webkit-clip-path:polygon(0 0,100% 0,100% 80%,0 60%);
	clip-path:polygon(0 0,100% 0,100% 80%,0 60%);
}
/* hover state */.flip-card-container:hover .card-front .img-bg::before {
	width:6px;
	border-left-color:var(--primary);
	border-right-color:var(--primary);
}
/* ul */ul {
	padding-top:50%;
	margin:0 auto;
	width:70%;
	height:100%;
	list-style:none;
	color:var(--white-1);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
/* li */li {
	width:100%;
	margin-top:12px;
	padding-bottom:12px;
	font-size:14px;
	text-align:center;
	position:relative;
}
li:nth-child(2n) {
	color:var(--white-2);
}
li:not(:last-child)::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:currentColor;
	opacity:.2;
}
/* button */button {
	font-family:inherit;
	font-weight:bold;
	color:var(--white-1);
	letter-spacing:2px;
	padding:9px 20px;
	border:1px solid var(--grey);
	border-radius:1000px;
	background:transparent;
	transition:.3s;
	cursor:pointer;
}
button:hover,button:focus {
	color:var(--primary);
	background:hsla(var(--hue),25%,10%,.2);
	border-color:currentColor;
}
button:active {
	-webkit-transform:translate(2px);
	transform:translate(2px);
}
/* .design-container */.design-container {
	--tr:90;
	--op:.5;
	width:100%;
	height:100%;
	background:transparent;
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
/* .design */.design {
	display:block;
	background:var(--grey);
	position:absolute;
	opacity:var(--op);
	transition:.3s;
}
.design--1,.design--2,.design--3,.design--4 {
	width:1px;
	height:100%;
}
.design--1,.design--2 {
	top:0;
	-webkit-transform:translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%));
	transform:translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%))
}
.design--1 {
	left:20%;
}
.design--2 {
	left:80%;
}
.design--3,.design--4 {
	bottom:0;
	-webkit-transform:translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%));
	transform:translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
}
.design--3 {
	left:24%;
}
.design--4 {
	left:76%;
}
.design--5,.design--6,.design--7,.design--8 {
	width:100%;
	height:1px;
}
.design--5,.design--6 {
	left:0;
	-webkit-transform:translateX(calc((var(--tr) - (var(--tr) * 2)) * 1%));
	transform:translateX(calc((var(--tr) - (var(--tr) * 2)) * 1%));
}
.design--5 {
	top:41%;
}
.design--6 {
	top:59%;
}
.design--7,.design--8 {
	right:0;
	-webkit-transform:translateX(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%));
	transform:translateX(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
}
.design--7 {
	top:44%;
}
.design--8 {
	top:56%;
}
/* states */button:hover+.design-container,button:active+.design-container,button:focus+.design-container {
	--tr:20;
	--op:.7;
}

</style>
</head&g.........完整代码请登录后点击上方下载按钮下载查看