css实现老照片堆积叠加效果代码-html代码-BFW代码库

css实现老照片堆积叠加效果代码

代码语言：html

代码描述：css实现老照片堆积叠加效果代码，照片底部文字通过js动态生成。

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

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

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

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #0ca4a5;
}
.picture {
  height: 393px;
  width: 336px;
  background-color: #ddc;
  background-image: linear-gradient(135deg, transparent 35%, rgba(0,0,0,0.1));
  border-radius: 2px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: -1;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.45), inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,255,255,0.5);
}
.picture:before {
  content: '';
  top: 20px;
  background-color: #ccc;
  filter: saturate(1.5) contrast(60%);
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 3px;
  z-index: 0;
}
.picture:after {
  content: '';
  top: 20px;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 42%, transparent 55%);
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 3px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15), inset 1px 1px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.95);
  z-index: 1;
}
.picture p {
  position: absolute;
  bottom: -30px;
  font-size: 42px;
  font-family: 'Permanent Marker';
  color: rgba(40,20,20,0.8);
  transform: rotate(357deg);
}
.picture1 {
  transform: perspective(2500px) rotateX(60deg) rotateZ(40deg) translateY(150px) translateX(150px);
  position: absolute;
}
.picture1:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/637429610b44f.png?x-os.........完整代码请登录后点击上方下载按钮下载查看