018 回顾

90后的小浣熊
187 阅读11分钟
  • transform不能与overflow:hidden和opcity连用。可以用rgba。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    @keyframes hs {
      from {
        transform: rotatex(0deg) rotateY(0deg) translatez(100px);
      }

      to {
        transform: rotateX(360deg) rotateY(800deg) translatez(100px);
      }
    }

    div {
      height: 500px;
      width: 500px;
      position: relative;
      transform-style: preserve-3d;
      animation: hs 5s infinite alternate;
    }

    div:hover {
      animation-play-state: paused;
    }

    span {
      box-shadow:0 0 0 100px rgba(255,0,0,0.1)
      display: block;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    span:nth-child(1) {
      transform: rotateX(180deg) translatez(100px);
    }

    span:nth-child(2) {
      transform: rotateX(0deg) translatez(100px);
    }

    span:nth-child(3) {
      transform: rotateY(90deg) translatez(100px);
    }

    span:nth-child(4) {
      transform: rotateY(-90deg) translatez(100px);
    }

    span:nth-child(5) {
      transform: rotatex(90deg) translatez(100px);
    }

    span:nth-child(6) {
      transform: rotatex(-90deg) translatez(100px);
    }

    span table {
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      border: none;
    }
  </style>
</head>

<body>
  <div>
    <span>
      <table>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

</html>

时钟

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      position: relative;
    }

    span {
      width: 50px;
      height: 50px;
      position: absolute;
      text-align: center;
      line-height: 50px;
      font-size: 32px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      color: red;
      transition: 1s;
    }

    /* @for $i from 1 through 12 {
    span:nth-child(#{$i}){
    transform:rotate(($i - 3) * 30deg) translate(120px) ratate(($i - 3) * 30deg)
      }
    } */
    span:nth-child(1) {
      transform: rotate(-60deg) translate(120px) rotate(60deg);
    }

    span:nth-child(2) {
      transform: rotate(-30deg) translate(120px) rotate(30deg);
    }

    span:nth-child(3) {
      transform: rotate(0deg) translate(120px) rotate(0deg);
    }

    span:nth-child(4) {
      transform: rotate(30deg) translate(120px) rotate(-30deg);
    }

    span:nth-child(5) {
      transform: rotate(60deg) translate(120px) rotate(-60deg);
    }

    span:nth-child(6) {
      transform: rotate(90deg) translate(120px) rotate(-90deg);
    }

    span:nth-child(7) {
      transform: rotate(120deg) translate(120px) rotate(-120deg);
    }

    span:nth-child(8) {
      transform: rotate(150deg) translate(120px) rotate(-150deg);
    }

    span:nth-child(9) {
      transform: rotate(180deg) translate(120px) rotate(-180deg);
    }

    span:nth-child(10) {
      transform: rotate(210deg) translate(120px) rotate(-210deg);
    }

    span:nth-child(11) {
      transform: rotate(240deg) translate(120px) rotate(-240deg);
    }

    span:nth-child(12) {
      transform: rotate(270deg) translate(120px) rotate(-270deg);
    }

    @keyframes second {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes second-inner {
      from {
        transform: rotate(0deg);
      }

      20%,
      to {
        transform: rotate(5deg);
      }
    }

    em {
      width: 6px;
      margin-left: -3px;
      height: 150px;
      position: absolute;
      xbackground-color: black;
      left: 50%;
      top: 20px;
      transform-origin: 50% 130px;
      animation: second 60s infinite steps(60);
    }

    em::after {
      content: '';
      display: block;
      background-color: black;
      width: 100%;
      height: 100%;
      transform-origin: 50% 130px;
      animation: second-inner infinite 1s cubic-bezier(0.4, 2.08, 0.55, 0.44);
    }
  </style>
</head>

<body>
  <div>
    <span>01</span>
    <span>02</span>
    <span>03</span>
    <span>04</span>
    <span>05</span>
    <span>06</span>
    <span>07</span>
    <span>08</span>
    <span>09</span>
    <span>10</span>
    <span>11</span>
    <span>12</span>
    <em class="second"></em>
  </div>
</body>
</html>
  • 2019-12-23
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div>
    <span>1<main>11</main></span>
    <span>2<main>22</main></span>
    <span>3<main>33</main></span>
    <span>4<main>44</main></span>
  </div>

</body>
</html>

* {
  background-color: rgba(0,0,0,0.1);
  font-size: 50px;
}
section {
  border: 5px solid;
}

@keyframes a {
  from {
    background-color: red;
  }
  to {
    background-color: pink;
  }
}

div {
  position: relative;
  border: 0px solid;
  height: 300px;
  margin-top: 70px;
}

span {
  background-color: pink;
  transition: 0s 99999999s;
  padding: 10px;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  float: right;
  margin-top: -69px;
  margin-bottom: 0px;
}
/* div span:first-child {
  animation: a 1 0.00001s backwards paused;
}
div:hover span:first-child {
  animation-play-state: running;
} */
div span:first-child {
  background-color: red;
}
div:hover span {
  background-color: pink;
  transition: none;
}
div span:hover {
  background-color: red;
}


main {
  position: absolute;
  left: 0;
  top: 0;
  height: 300px;
  width: 100%;
  visibility: hidden;
  transition: 0s 999999s;
}

span:first-child main {
  visibility: visible;
}

div:hover main {
  visibility: hidden;
  transition: none;
}

span:hover main {
  visibility: visible;
  transition: none;
}

propogate to viewport

html {
      background-color: red;
    }

    body {
      border: 8px solid;
      background-color: yellow;
      overflow: scorll;
      border-radius: 9999px;
      outline: 10px solid blue;
    }

  • 圆角不影响布局

摆图片

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgb(0, 0, 0, 0.1);
    }

    div {
      display: flex;
      align-items: center;
    }

    img {
      vertical-align: middle;
      align-self: center;
    }
  </style>
</head>

<body>
  <div>
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae inventore odio quibusdam ut sunt. In expedita dolor
    dolorum obcaecati quibusdam doloremque, ipsa laboriosam, dolore quis sunt modi corrupti quae laborum.
  </div>
</body>

</html>

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width= , initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      background-color: rgba(0, 0, 0, 0.1);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    span {
      display: inline-block;
      font-size: 50px;
      animation: spin 5s infinite linear reverse;
    }

    div {
      width: 200px;
      height: 200px;
      animation: spin 5s infinite linear;
    }

    @keyframes foo {
      from {
        transform: rotate(0) translate(100px) rotate(-0deg);
      }

      to {
        transform: rotate(360deg) translate(100px) rotate(-360deg);
      }
    }

    em {
      display: block;
      width: min-content;
      margin: auto;
      margin-top: 200px;
      animation: foo 10s linear infinite;
    }

    @keyframes sin {
      from {
        left: -100px;
      }

      to {
        left: 100px;
      }
    }

    @keyframes cos {
      from {
        top: -100px;
      }

      to {
        top: 100px;
      }
    }

    section {
      position: relative;
      width: 100px;
      height: 100px;
      margin: auto;
      transition: 1s;
      animation: sin 2s cubic-bezier(.36, 0, .64, 1) infinite alternate, cos 2s -1s cubic-bezier(.36, 0, .64, 1) infinite alternate;
      /* animation: sin 2s cubic-bezier(.36, 0, .64, 1) infinite alternate, cos 2s -1s sin cubic-bezier(.36, 0, .64, 1) infinite alternate; */
    }
  </style>
</head>

<body>
  <div>
    <span>脸</span>
  </div>

  <em>脸</em>

  <section>脸</section>
</body>

</html>

bootstrap 栅格布局

  • xs sm md lg
avatar
文章
阅读
粉丝