css实现悬浮信封并从中弹出照片动画效果代码-html代码-BFW代码库

css实现悬浮信封并从中弹出照片动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮信封并从中弹出照片动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
	padding:0;
	margin:0;
}
.container {
	width:100%;
	height:100vh;
	position:relative;
}
.beauty-container {
	position:absolute;
	top:35%;
	left:6%;
	width:300px;
	height:200px;
	background-color:burlywood;
	box-shadow:inset 100px 0 10px 5px rgba(0,0,0,0.4);
	border-top-right-radius:25px;
	border-bottom-right-radius:25px;
	perspective:1000px;
	perspective-origin:bottom;
}
.beauty-container:hover .beauty-card-parent {
	left:-20px;
}
.beauty-container:hover .beauty-card-parent .beauty-card-cover {
	opacity:0;
	right:-20px;
	transform:rotateY(180deg);
}
.beauty-container:hover .beauty-card:nth-child(3) {
	left:350px;
	top:-40px;
	transition-delay:1.5s;
}
.beauty-container:hover .beauty-card:nth-child(2) {
	left:550px;
	top:-50px;
	transition-delay:1.25s;
}
.beauty-container:hover .beauty-card:nth-child(1) {
	left:750px;
	top:-60px;
	transition-delay:1s;
}
.beauty-container:hover .beauty-card {
	height:280px !important;
	box-shadow:0 10px 15px 1px rgba(31,56,108,0.4);
}
.beauty-container:hover .beauty-card:hover {
	transition:.1s all;
	z-index:1;
	transform:scale(1.2);
	position:absolute;
}
.beauty-card-parent {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:burlywood;
	transition:0.5s all !important;
}
.beauty-card-parent .beauty-card-cover {
	position:absolute;
	top:0;
	right:0;
	width:20px;
	transition:0.3s all;
	height:99%;
	background-color:burlywood;
	border:1px solid rgba(80,120,120,0.5);
	border-right:none;
	box-shadow:-6px 0 5px -4px rgba(80,120,120,0.5);
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
}
.beauty-card-parent:hover {
	box-shadow:10px 0 5px -4px rgba(80,120,120,0..........完整代码请登录后点击上方下载按钮下载查看