css3扑克牌展开折叠动画特效

1、新建html文档。

3、书写css代码。body { background: #e7e7e7; font-family: &#泌驾台佐39;Source Sans Pro', sans-serif; font-weight: 200; font-size: 1.4rem; height: 100vh; overflow: hidden; width: 100vw;}.inspired { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; font-weight: 400; position: absolute; bottom: 6px; right: 6px; z-index: 10;}.inspired a { color: rgba(0, 0, 0, 0.4); display: inline-block; font-size: 16px; padding: 0 24px 10px; text-decoration: none;}.message { color: #eeeae7; text-shadow: 0 0 5px #b4b4b4; font-size: 32px; font-weight: 200; letter-spacing: -0.01em; line-height: 40px; position: absolute; transform: rotate(-31deg) translate3d(80%, 130%, 0); width: 3em;}

5、代码整体结构。