表白爱心信封动画效果-html代码-BFW代码库

表白爱心信封动画效果

代码语言：html

所属分类：表白

代码描述：表白爱心信封动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
  padding:0;
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
    background-image: linear-gradient(
    45deg,
    #ffc2cd 25%,
    #fcfeff 25%,
    #fcfeff 50%,
    #ffc2cd 50%,
    #ffc2cd 75%,
    #fcfeff 75%,
    #fcfeff 100%
  );
  background-size: 56.57px 56.57px;
  margin: 2em;
  text-align: center;
  font-size: 22pt;
}
.card{
  width:0;
  height:0;
  border-top:100px solid #eee;
  border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
  border-bottom:100px solid #ccc;
  border-right:170px solid #ddd;
  border-left:170px solid #ccc;
  
}
.heart{
  
width:32px;
  height:32px;
  background-color:#ff3838;
  transform:translate(580%,-20%) rotate(45deg);
  animation:beat 1s linea.........完整代码请登录后点击上方下载按钮下载查看