div+css实现扑克牌上下堆叠loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现扑克牌上下堆叠loading加载动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>

.stack {
    margin: 100px;
  --stack-dur: 3s;
  --stack-delay: 0.05;
  --stack-spacing: 10%;
  overflow: hidden;
  position: relative;
  width: 14em;
  height: 32em;
}
.stack__card {
  aspect-ratio: 1;
  position: absolute;
  inset: 0;
  top: var(--stack-spacing);
  margin: auto;
  width: 50%;
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}
.stack__card::before {
  animation: card var(--stack-dur) infinite;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjMDAwMDAwIj48ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCI+PC9nPjxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggc3R5bGU9ImZpbGw6I0Q3REVFRDsiIGQ9Ik0zODAuODU0LDUwNEgxMzEuMTQ2QzExNi43MDYsNTA0LDEwNSw0OTIuMjk0LDEwNSw0NzcuODU0VjM0LjE0NkMxMDUsMTkuNzA2LDExNi43MDYsOCwxMzEuMTQ2LDggaDI0OS43MDdDMzk1LjI5NCw4LDQwNywxOS43MDYsNDA3LDM0LjE0NnY0NDMuNzA3QzQwNyw0OTIuMjk0LDM5NS4yOTQsNTA0LDM4MC44NTQsNTA0eiI+PC9wYXRoPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6IzJEMkIyOTsiIGQ9Ik0zNzYsMEgxMzZjLTIyLjA1NiwwLTQwLDE3Ljk0NC00MCw0MHY0MzJjMCwyMi4wNTYsMTcuOTQ0LDQwLDQwLDQwaDI0MGMyMi4wNTYsMCw0MC0xNy45NDQsNDAtNDAgVjQwQzQxNiwxNy45NDQsMzk4LjA1NiwwLDM3NiwweiBNNDAwLDQ3MmMwLDEzLjIzMy0xMC43NjYsMjQtMjQsMjRIMTM2Yy0xMy4yMzQsMC0yNC0xMC43NjctMjQtMjRWNDBjMC0xMy4yMzMsMTAuNzY2LTI0LDI0LTI0IGgyNDBjMTMuMjM0LDAsMjQsMTAuNzY3LDI0LDI0VjQ3MnoiPjwvcGF0aD4gPHBhdGggc3R5bGU9ImZpbGw6IzJEMkIyOTsiIGQ9Ik0zNzYsODcuOTk4VjQ4YzAtNC40MTgtMy41ODItOC04LThoLTM5Ljk5OGMtMC4wMDEsMC0wLjAwMywwLTAuMDA1LDBoLTM5Ljk5NSBjLTAuMDAxLDAtMC4wMDMsMC0wLjAwNSwwaC0zOS45OTVjLTAuMDAxLDAtMC4wMDMsMC0wLjAwNSwwSDE0NGMtNC40MTgsMC04LDMuNTgyLTgsOHYxNS45OThjMCwwLjAwMSwwLDAuMDAzLDAsMC4wMDV2MzkuOTk1IGMwLDAuMDAxLDAsMC4wMDMsMCwwLjAwNXYzOS45OTVjMCwwLjAwMSwwLDAuMDAzLDAsMC4wMDV2MzkuOTk1YzAsMC4wMDEsMCwwLjAwMywwLDAuMDA1djM5Ljk5NWMwLDAuMDAxLDAsMC4wMDMsMCwwLjAwNXYzOS45OTUgYzAsMC4wMDEsMCwwLjAwMywwLDAuMDA1djM5Ljk5NWMwLDAuMDAxLDAsMC4wMDMsMCwwLjAwNXYzOS45OTVjMCwwLjAwMSwwLDAuMDAzLDAsMC4wMDV2MzkuOTk1YzAsMC4wMDEsMCwwLjAwMywwLDAuMDA1djM5Ljk5NSBjMCwwLjAwMSwwLDAuMDAzLDAsMC4wMDVWNDY0YzAsNC40MTgsMy41ODIsOCw4LDhoMjI0YzQuNDE4LDAsOC0zLjU4Miw4LTh2LTE1Ljk5OGMwLTAuMDAxLDAtMC4wMDMsMC0wLjAwNXYtMzkuOTk1IGMwLTAuMDAxLDAtMC4wMDMsMC0wLjAwNXYtMzkuOTk1YzAtMC4wMDEsMC0wLjAwMywwLTAuMDA1di0zOS45OTVjMC0wLjAwMSwwLTAuMDAzLDAtMC4wMDV2LTM5Ljk5NWMwLTAuMDAxLDAtMC4wMDMsMC0wLjAwNSB2LTM5Ljk5NWMwLTAuMDAxLDAtMC4wMDMsMC0wLjAwNXYtMzkuOTk1YzAtMC4wMDEsMC0wLjAwMywwLTAuMDA1di0zOS45OTVjMC0wLjAwMSwwLTAuMDAzLDAtMC4wMDV2LTM5Ljk5NSBjMC0wLjAwMSwwLTAuMDAzLDAtMC4wMDVWODguMDAyQzM3Niw4OC4wMDEsMzc2LDg3Ljk5OSwzNzYsODcuOTk4eiBNMzA3LjMxMyw0NTZMMTUyLDMwMC42ODd2LTE3LjM3M0wzMjQuNjg3LDQ1NkgzMDcuMzEzeiBNMjY3LjMxMyw0NTZMMTUyLDM0MC42ODd2LTE3LjM3M0wyODQuNjg3LDQ1NkgyNjcuMzEzeiBNMjI3LjMxMyw0NTZMMTUyLDM4MC42ODd2LTE3LjM3M0wyNDQuNjg3LDQ1NkgyMjcuMzEzeiBNMTg3LjMxMyw0NTYgTDE1Miw0MjAuNjg3di0xNy4zNzNMMjA0LjY4Nyw0NTZIMTg3LjMxM3ogTTE1MiwyMDMuMzEzbDIwOCwyMDh2MTcuMzczbC0yMDgtMjA4VjIwMy4zMTN6IE0xNTIsMTgwLjY4N3YtMTcuMzczbDIwOCwyMDh2MTcuMzczIEwxNTIsMTgwLjY4N3ogTTE1MiwxNDAuNjg3di0xNy4zNzNsMjA4LDIwOHYxNy4zNzNMMTUyLDE0MC42ODd6IE0xNTIsMTAwLjY4N1Y4My4zMTNsMjA4LDIwOHYxNy4zNzNMMTUyLDEwMC42ODd6IE0yMDQuNjg3LDU2IEwzNjAsMjExLjMxM3YxNy4zNzNMMTg3LjMxMyw1NkgyMDQuNjg3eiBNMjI3LjMxMyw1NmgxNy4zNzNMMzYwLDE3MS4zMTN2MTcuMzczTDIyNy4zMTMsNTZ6IE0yNjcuMzEzLDU2aDE3LjM3M0wzNjAsMTMxLjMxMyB2MTcuMzczTDI2Ny4zMTMsNTZ6IE0zMDcuMzEzLDU2aDE3LjM3M0wzNjAsOTEuMzEzdjE3LjM3M0wzMDcuMzEzLDU2eiBNMzYwLDY4LjY4N0wzNDcuMzEzLDU2SDM2MFY2OC42ODd6IE0xNjQuNjg3LDU2IEwzNjAsMjUxLjMxM3YxNy4zNzNsLTIwOC0yMDhWNTZIMTY0LjY4N3ogTTE1Miw0NDMuMzEzTDE2NC42ODcsNDU2SDE1MlY0NDMuMzEzeiBNMzQ3LjMxMyw0NTZMMTUyLDI2MC42ODd2LTE3LjM3M2wyMDgsMjA4VjQ1NiBIMzQ3LjMxM3oiPjwvcGF0aD4gPC9nPiA8L2c+PC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 95% 95%;
  border-radius: 7.5%;
  box-shadow: -0.5em 0.5em 1.5em hsl(var(--hue), 90%, 15%, 0.1);
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}
.stack__card:nth-child(2) {
  top: 0;
}
.stack__card:nth-child(2)::before {
  animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay)));
  background-color: transparent;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZX.........完整代码请登录后点击上方下载按钮下载查看