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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看