css实现悬浮三维翻转信封卡片效果代码-html代码-BFW代码库

css实现悬浮三维翻转信封卡片效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮三维翻转信封卡片效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  background: var(--corner);
  --architect: "Architects Daughter", cursive;
  --indie: "Indie Flower", cursive;
  --black: #313131;
  --blue: #3B98C4;
  --teal: #79CCAA;
  --yellow: #F0DA4B;
  --purple: #BE7AC5;
  --pink: #D9679B;
  --gradient: linear-gradient(45deg, hsla(199, 54%, 50%, 1) 0%, hsla(155, 45%, 64%, 1) 19%, hsla(52, 85%, 62%, 1) 47%, hsla(294, 39%, 63%, 1) 82%, hsla(151, 39%, 54%, 1) 100%);
  --corner: radial-gradient(farthest-corner at 40px 40px, hsla(199, 54%, 50%, 1) 0%, hsla(155, 45%, 64%, 1) 19%, hsla(52, 85%, 62%, 1) 47%, hsla(294, 39%, 63%, 1) 82%, hsla(151, 39%, 54%, 1) 100%);
  --radial: radial-gradient(ellipse at top, #F0DA4B, #3B98C4, #79CCAA, transparent), radial-gradient(ellipse at b.........完整代码请登录后点击上方下载按钮下载查看