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

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

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