css布局实现咖啡书落叶动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现咖啡书落叶动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
* {
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box; 
}
*:before,
*:after {
  content: ''; 
  position:absolute;
}
:root{
  --bg:rgb(231,227,226);
  --shadow:rgb(221,215,215);
  --border:rgb(0,0,0);
  --bubble:rgb(199,141,127);
  --text:rgb(255,254,243);
  --cup:rgb(255,255,255);
  --cup_heart:rgb(187,127,136);
  --book_1:rgb(184,152,157);
  --book_1D:rgb(159,130,134);
  --book_2:rgb(220,181,186);
  --book_2D:rgb(239,239,239);
  --book_2L:rgb(247,246,249);
  --book_3:rgb(192,178,178);
  --book_3D:rgb(158,148,149);
  --book_4:rgb(163,149,149);
  --book_4D:rgb(238,236,237);
  --book_4L:rgb(245,243,244);
  --steam:rgb(169,156,149);
  --leave_1:rgb(187,127,136); 
  --leave_2:rgb(224, 143, 98);
  --leave_3:rgb(157, 171, 134);
  --leave_4:rgb(236, 234, 95);
/*    font-size:30px; */
}
body{
  background:var(--bg);
  overflow: hidden;
}
img{
  width:25em;
  height:auto; 
  position:absolute;
  top:62.5%;
  left:49%;
  transform:translate(-50%,-50%);
  opacity:0;
}
.container {
  width:20em;
  height:28em; 
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.bubble{
  width:8em;
  height:6em;
  border-radius:57% 97% 78% 75% / 84% 70% 91% 76% ;
  position:absolute;
  top:0em;
  left:4em; 
}
.bubble::after{
  width:2em;
  height:3em;
  transform:scale(-1,1) rotate(-60deg) skew(-60deg) ;
  clip-path: polygon(0 78%, 54% 85%, 100% 100%, 0 100%);
  top:1.5em;
  left:0.55em;
}
.bubble-origin{
  border:0.13em solid var(--border);
}

.bubble-origin::after{
  background:var(--bg);
  border:0.13em solid var(--border);  
}
.bubble-shadow{
  background:var(--bubble);
  left:4.45em; 
}
.bubble-shadow::after{
  background:var(--bubble);
  z-index:1;
}
h1{
  display:inline-block;
  color:var(--text);
  font-size:1.6rem;
/*   font-family: 'Sacramento', cursive; */
  font-family: 'Dancing Script', cursive;
  font-weight: lighter;
  position:absolute;
  top:1.2em;
  left:3.4em;   
}
.shadow{
  background:var(--shadow);
  position:absolute;
  transform:skew(43deg);
}
.shadow-1{
  width:4.5em;
  height:5em;
  top:13em;
  left:10.5em; 
}
.shadow-2{
  width:25em;
  height:14em;
  top:17em;
  left:-1em; 
  clip-path: polygon(51% 0, 100% 0, 100% 100%, 0 100%, 0 72%);
}
.book-1{
  width:16em;
  height:3.25em;
  background:linear-gradient(90deg 
    ,rgba(0,0,0,0) 8.5%
    ,var(--book_1D) 9%
    ,var(--book_1D) 15%
    ,rgba(0,0,0,0) 15.5%
    ,rgba(0,0,0,0) 17%
    ,var(--book_1D) 17.5%
    ,var(--book_1D) 19%
    ,rgba(0,0,0,0) 19.5%
    ,rgba(0,0,0,0) 80.5%
    ,var(--book_1D) 81%
    ,var(--book_1D) 82.5%
    ,rgba(0,0,0,0) 83%
    ,rgba(0,0,0,0) 84.5% 
    ,var(--book_1D) 85% 
    ,var(--book_1D) 91%
    ,rgba(0,0,0,0) 91.5% )
    ,var(--book_1); 
  border-radius:7%/30% ;
  position:absolute;
  bottom:0em;
  left:2em; 
}
.book-1::before{
  width:7em;
  height:0.4em;
  background:var(--book_1D);
  top:1.2em;
  left:4.7em;
}
.book-1::after{
  width:6em;
  height:0.15em;
  background:var(--book_1D);
  top:1.9em;
  left:5.3em;
}
.book-2{
  width:15.8em;
  height:2.1em;
  background:linear-gradient(180deg 
    ,var(--book_2D) 49% 
    ,var(--book_2L) 50%
); 
  position:absolute;
  bottom:3.7em;
  left:2.2em; 
}
.book-2::before{
  width:16em;
  height:0.4em;
  background:var(--book_2);
  position:absolute;
  top:-0.4em;
  left:-0.1em; 
}
.book-2::after{
  width:16em;
  height:0.4em;
  background:var(--book_2);
  position:absolute;
  bottom:-0.45em;
  left:-0.1em; 
}
.book-3{
  width:14.8em;
  height:2.8em;
  background:linear-gradient(90deg 
    ,rgba(0,0,0,0) 8.5%
    ,var(--book_3D) 9%
    ,var(--book_3D) 9.5%
    ,rgba(0,0,0,0) 10%
    ,rgba(0,0,0,0) 11.5%
    ,var(--book_3D) 12%
    ,var(--book_3D) 12.5%
    ,rgba(0,0,0,0) 13%
    ,rgba(0,0,0,0) 87%
    ,var(--book_3D) 87.5%
    ,var(--book_3D) 88%
    ,rgba(0,0,0,0) 88.5%
    ,rgba(0,0,0,0) 90% 
    ,var(--book_3D) 90.5% 
    ,var(--book_3D) 91%
    ,rgba(0,0,0,0) 91.5% )
    ,var(--book_3); 
  border-radius:7%/30% ;
  position:absolute;
  bottom:6.2em;
  left:2.7em; 
}
.book-3::before{
  width:6.7em;
  height:0.6em;
  background:var(--book_3D);
  top:0.95em;
  left:4.4em;
}
.book-3::after{
  width:3.8em;
  height:0.1em;
  background:var(--book_3D);
  top:1.8em;
  left:6.8em;
}
.book-4{
  width:14.5em;
  height:1.8em;
  backg.........完整代码请登录后点击上方下载按钮下载查看