1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class="perspective"> <div class='card-container'> <div class="message">点击 左侧 卡牌</div> <div class='card card-card1'> <div class='card__face card__face--top'> <span class='card__value'> A </span> <span class='card__suit'> <svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" > <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" stroke="#635F5C"></path> </g> </svg> </span> </div> <div class='card__face card__face--btm'> <span class='card__value'> A </span> <span class='card__suit'> <svg width="21px" height="16px" viewBox="0 0 21 16" version="1.1" > <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path-2" stroke="#635F5C"></path> </g> </svg> </span> </div> </div>
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;}
4、书写并添加js代码。<script src='js/jquery.min.js'></script><script src="js/index.js"></script>
5、代码整体结构。
6、查看效果。
