splitting+css实现单个div墙上挂画效果代码-html代码-BFW代码库

splitting+css实现单个div墙上挂画效果代码

代码语言：html

代码描述：splitting+css实现单个div墙上挂画效果代码

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

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

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


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">
<style>
*,
* + * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #43879a;
	font-family: sans-serif;
	perspective: 30rem;
}
div {
	width: 40vmin;
	aspect-ratio: 2 / 2.5;
	padding: 0.75em;
	margin: 6vmin;
	border: 1.5vmin solid #22334d;
	background-color: #fff;
	background-position: 75% center;
	background-size: cover;
	background-clip: padding-box;
	box-shadow: 
		/* inner frame shadow */ inset 0.125em 0.125em 0.3em
			rgba(58 116 132 / 1),
		/* white */ inset 0.25em 0.25em 0 0.25em #fbcce7,
		/* white */ inset -0.25em -0.25em 0 0.25em #fbcce7,
		/* frame shadow on wall */ 0.5em 0.5em 0.5em rgba(65 33 2 / 0.5);
	transform-style: preserve-3d;
	transform: rotateX(-2deg);
	font-size: calc(0.55rem + 1vmin);
	position: relative;
}
div:nth-child(1) {
	background-image: url("//repo.bfw.wiki/bfwrepo/image/651e89197ceda.png");
}
div:nth-child(2) {
	background-image: url("//repo.bfw.wiki/bfwrepo/image/651e8924f1d88.png");
}

div::before,
div::after {
	position: absolute;
	content: "";
}

/* string and nail */
div.........完整代码请登录后点击上方下载按钮下载查看