html 传播卡

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 传播卡相关的知识，希望对你有一定的参考价值。

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,900');

body {
  background: #e7e7e7;
  font-family: '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;
  a {
    color: rgba(0,0,0,0.4);
    display: inline-block;
    font-size: 12px;
    padding: 0 24px 10px;
    text-decoration: none;
  }
}

.message {
//  color: rgba(255,255,255,0.0);
//  text-shadow: 0 0 3px rgba(255,255,255,0.95);
  color: #e7e7e7;
  text-shadow: 0 0 3px darken(#e7e7e7, 20);
  
  font-size: 70px;
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 60px;
  position: absolute;
  transform: rotate(-31deg) translate3d(50%, 130%, 0);
  width: 3em;
}

.card {
  background: #eeeae7;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(151,150,146,0.4);
  height: 45vw;
//  margin: -27.5vw 0 0 -17.5vw;
  max-height: 450px;
  max-width: 320px;
  min-height: 225px;
  min-width: 160px;
  position: absolute;
  transition: all ease-in 0.3s;
  width: 32vw;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.card-card1 {
  box-shadow:
    0 1px 2px 0 rgba(151,150,146,0.4),
    0 4px 12px 0 rgba(151,150,146,0.4)
    ;
  color: #635f5c;
}
.card-card2 {
  color: #a68385;
  .card__value {
    transform: translatex(-2px);
  }
  .card__suit {
    margin-top: 0.8rem;
  }
}

.card-card3 {
  color: #635f5c;
  .card__suit {
    margin-top: 0.8rem;
  }
}
.card-card4 {
  color: #a68385;
  .card__suit {
    margin-top: 0.7rem;
  }
}

.card__face {
  padding: 1.8rem 1.6rem;
  position: absolute;
}
.card__face--btm {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.card__value {
  display: block;
  text-align: center;
  width: 22px;
}
.card__suit {
  display: block;
  margin-top: 0.5rem;
}

div.perspective {
  height: 100vh;
  perspective: 2000px;
  position: absolute;
  width: 100vw;
}
.card-container {
  cursor: pointer;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: rotateX(35deg) translate3d(-50%,-50%,0);
  height: 45vw;
  width: 32vw;
  max-height: 450px;
  max-width: 320px;
}


.card-card1 {
  transform: rotate(-31deg) translate3d(-50%, -10%, 0);
}
.card-card2 {
  transform: rotate(-31deg) translate3d(-49.5%, -10.5%, 0);
}
.card-card3 {
  transform: rotate(-31deg) translate3d(-49%, -11%, 0);
}
.card-card4 {
  transform: rotate(-31deg) translate3d(-48.5%, -11.5%, 0);
}

.card-container.spread {
  .card-card1 {
    transform: rotate(-31deg) translate3d(-50%, -10%, 0);
    box-shadow:
      0 1px 2px 0 rgba(151,150,146,0.4),
      0 4px 12px 0 rgba(151,150,146,0.4)
      ;
  }
  .card-card2 {
    transform: rotate(-4.5deg) translatex(-22%);
    box-shadow:
      0 1px 2px 0 rgba(151,150,146,0.4),
      0 2px 6px 0 rgba(151,150,146,0.4)
      ;
  }
  .card-card3 {
    transform: rotate(5.8deg) translatex(10%);
    box-shadow:
      0 1px 2px 0 rgba(151,150,146,0.4),
      0 2px 4px 0 rgba(151,150,146,0.4)
      ;
  }
  .card-card4 {
    transform: rotate(22.5deg) translate3d(40%, -5%, 0);
    box-shadow:
      0 1px 2px 0 rgba(151,150,146,0.4),
      0 2px 4px 0 rgba(151,150,146,0.4)
      ;
  }
}




@keyframes card1 {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
Spread cards
------------


A [Pen](https://codepen.io/candroo/pen/NvJZNx) by [Andrew Canham](https://codepen.io/candroo) on [CodePen](https://codepen.io).

[License](https://codepen.io/candroo/pen/NvJZNx/license).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

$(document).ready(function(){
  $('.card-container').click(function(){
    $(this).toggleClass("spread");
  });
});
<div class="inspired">
  <a href="http://joedoucet.com/#/iota/" target="_blank">Inspired by <strong>http://joedoucet.com/#/iota</strong></a>
</div>
<div class="perspective">
  <div class='card-container'>
    <div class="message">
      CLICK THE CARDS
    </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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <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>
    <div class='card card-card2'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          K
        </span>
        <span class='card__suit'>
          <svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width="13.1923882" height="13.1923882"></rect>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          K
        </span>
        <span class='card__suit'>
          <svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" width="13.1923882" height="13.1923882"></rect>
              </g>
          </svg>
        </span>
      </div>
    </div>
    <div class='card card-card3'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          Q
        </span>
        <span class='card__suit'>
          <svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          Q
        </span>
        <span class='card__suit'>
          <svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
                  <circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
              </g>
          </svg>
        </span>
      </div>
    </div>
    <div class='card card-card4'>
      <div class='card__face card__face--top'>
        <span class='card__value'>
          J
        </span>
        <span class='card__suit'>
          <svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" stroke="#A68385" transform="translate(10.000000, 7.631510) rotate(-180.000000) translate(-10.000000, -7.631510) "></path>
              </g>
          </svg>
        </span>
      </div>
      <div class='card__face card__face--btm'>
        <span class='card__value'>
          J
        </span>
        <span class='card__suit'>
          <svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <path d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Path-2" stroke="#A68385" transform="translate(10.000000, 7.631510) rotate(-180.000000) translate(-10.000000, -7.631510) "></path>
              </g>
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

以上是关于html 传播卡的主要内容，如果未能解决你的问题，请参考以下文章

神经网络反向传播算法卡在 XOR 训练模式上

Html Select 如何进行默认选择

中继片段传播不起作用

反向传播算法收敛过快导致结果不佳

html 传播-3.html

html 传播-2.HTML