js实现扑克牌钻石A悬浮视觉差异效果代码-html代码-BFW代码库

js实现扑克牌钻石A悬浮视觉差异效果代码

代码语言：html

代码描述：js实现扑克牌钻石A悬浮视觉差异效果代码，鼠标放上去移动试试

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cinzel:wght@700&amp;display=swap'>
  
<style>
body {
  margin: 0;
  background: #000;
}

main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  width: 60vh;
  height: 80vh;
  max-height: 0;
  overflow: hidden;
  border: 2px solid #F23D4C;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 200px;
  box-shadow: 0 0 8px 2px rgba(242, 61, 76, 0.66), 0 0 16px 4px rgba(242, 61, 76, 0.33) inset;
  background: linear-gradient(to bottom, rgba(242, 61, 76, 0.2), rgba(242, 61, 76, 0.1) 66%);
  opacity: 0;
  transition: transform 50ms ease-in-out;
  animation: unfurl 1000ms ease-in-out forwards;
}

@keyframes unfurl {
  0% { max-height: 0; opacity: 0; }
  5% { max-height: 0; opacity: 1; }
  10% { max-height: 0; opacity: 0; }
  15% { max-height: 0; opacity: 1; }
  20% { max-height: 0; opacity: 0; }
  25% { max-height: 0; opacity: 1; }
  30% { max-height: 0; opacity: 0; }
  100% { max-height: 80vh; opacity: 1; }
}

section > svg {
  width: 40vh;
  position: absolute;
  transition: transform 50ms ease-in-out;
}

path {
  fill: none;
  stroke: #F23D4C;
}

aside {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  color: #F23D4C;
  padding: 3vh;
  font-size: 4vh;
  font-family: 'Cinzel', serif;
  animation: fadeIn 250ms ease-out forwards 1250ms;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

aside:nth-of-type(1) {
  left: 0;
  top: 0;
}

aside:nth-of-type(2) {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

aside svg {
  width: 4vh;
  margin-top: 1vh;
}

aside path {
  stroke-width: 5px;
}
</style>

</head>

<body >
  <main>
  <section>
    <aside>
      <span>A</span>
    </.........完整代码请登录后点击上方下载按钮下载查看