动画-CSS3学习笔记

小婉子啊
82 阅读3分钟

CSS3中的一些动画效果

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body{
        margin: 0 ;
        padding: 100px;
      }
      .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: pink;
        transform-style: preserve-3d;
        /*属性设置在父级元素中，它的子级元素具有 3d 效果  */
        transform: rotateX(-33.5deg) rotateY(45deg) scaleZ(1);
      }
      .item {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
      }
      .item1 {
        background-color: rgba(255, 0, 0, 0.5);
        transform: rotateX(-90deg) translateZ(50px);
      }
      .item2 {
        background-color: rgba(0, 255, 0, 0.5);
        transform: rotateX(90deg) translateZ(50px);
      }
      .item3 {
        background-color: rgba(100, 100, 100, 0.5);
        transform: rotateX(0deg) translateZ(50px);
      }
      .item4 {
        background-color: rgba(0, 255, 255, 0.5);
        transform: rotateX(0deg) translateZ(-50px);
      }
      .item5 {
        background-color: rgba(255, 255, 0, 0.5);
        transform: rotateY(90deg) translateZ(-50px);
      }
      .item6 {
        background-color: rgba(0, 0, 255, 0.5);
        transform: rotateY(-90deg) translateZ(-50px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
    </div>
  </body>
</html>
​

将上文中的

 body{
        margin: 0 ;
        padding: 100px;
      }
 变为
    *{
        margin: 0 ;
        padding: 100px;
      }

就可以得到这个图形

image.png

几个特性：

  1. backface-visibility:visible;元素背向是否可见
  2. animation:loop 3s linear infinite;帧动画
@keyframes loop{
 0%{
 transform:rotateY(0deg);
 }
 100%{
 transform:rotateY(360deg)
 }
}
  1. perspection

webpack的logo动画绘制

webpack-logo_1.gif

html页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
  
  </head>
  <body>
    <div class="webpack-logo">
      <!-- cube-inner -->
      <ul class="cube-inner">
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
      </ul>
      <!-- cube-outer -->
      <ul class="cube-outer">
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
      </ul>
    </div>
  </body>
</html>
​

css页面

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #2b3a42;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul {
  list-style: none;
  padding: 0;
}
.webpack-logo {
  position: relative;
  width: 100%;
  height: 200px;
}
.cube-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0px 0px -25px;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  animation: innerLoop 6s ease-in-out infinite;
  /* 先慢再快，无限循环 */
}
@keyframes innerLoop{
  0%{
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  50%,100%{
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}
.cube-inner li {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #175d96;
  border: 1px solid white;
}
.cube-inner .item1 {
  transform: rotateX(-90deg) translateZ(25px);
}
.cube-inner .item2 {
  transform: rotateX(90deg) translateZ(25px);
}
.cube-inner .item3 {
  transform: rotateX(0deg) translateZ(25px);
}
.cube-inner .item4 {
  transform: rotateX(-180deg) translateZ(25px);
}
.cube-inner .item5 {
  transform: rotateY(-90deg) translateZ(25px);
}
.cube-inner .item6 {
  transform: rotateY(90deg) translateZ(25px);
}
​
.cube-outer {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px 0px 0px -50px;
  width: 100px;
  height: 100px;
  list-style: none;
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
  animation: outerLoop 6s ease-in-out infinite;
}
@keyframes outerLoop{
  0%{
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  50%,100%{
    transform: rotateX(-33.5deg) rotateY(405deg);
  }
}
.cube-outer li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(141, 214, 249, 0.5);
  border: 1px solid white;
}
.cube-outer .item1 {
  transform: rotateX(-90deg) translateZ(50px);
}
.cube-outer .item2 {
  transform: rotateX(90deg) translateZ(50px);
}
.cube-outer .item3 {
  transform: rotateX(0deg) translateZ(50px);
}
.cube-outer .item4 {
  transform: rotateX(-180deg) translateZ(50px);
}
.cube-outer .item5 {
  transform: rotateY(-90deg) translateZ(50px);
}
.cube-outer .item6 {
  transform: rotateY(90deg) translateZ(50px);
}
​

数据平台

数据平台2.5D动画.gif

index.html

源码地址 github.com/zhangwan370…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compa
    tible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 1.基本样式 -->
    <style>
      html,
      body,
      div,
      span,
      applet,
      object,
      iframe,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      blockquote,
      pre,
      a,
      abbr,
      acronym,
      address,
      big,
      cite,
      code,
      del,
      dfn,
      em,
      font,
      img,
      ins,
      kbd,
      q,
      s,
      samp,
      small,
      strike,
      strong,
      sub,
      sup,
      tt,
      var,
      b,
      u,
      i,
      center,
      dl,
      dt,
      dd,
      ol,
      ul,
      li,
      fieldset,
      form,
      label,
      legend,
      table,
      caption,
      tbody,
      tfoot,
      thead,
      tr,
      th,
      td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
      }
      html,
      body {
        width: 100%;
        position: relative;
      }
      #banner {
        position: absolute;
        min-width: 100%;
        min-height: 500px;
        height: auto;
        width: auto;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: -10;
        background-image: url(./images/banbj.jpeg);
        background-repeat: no-repeat;
        background-position: center;
      }
      .maxCon {
        height: 500px;
        width: 100%;
        max-width: 1200px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }
    </style>
​
    <!-- 2.图片布局样式 -->
    <style>
      /* 动画的舞台 */
      .rtMove {
        width: 444px;
        height: 430px;
        position: absolute;
        right: 70px;
        top: 40px;
        background-image: url(./images/banner.png);
        background-position: center bottom;
        background-repeat: no-repeat;
      }
​
      /* 动画的子元素 */
      .rtMove .tuC {
        position: absolute;
        top: 228px;
        left: 168px;
        opacity: 1;
        animation: tuC 1.6s linear infinite;
      }
​
      .rtMove .tuB {
        position: absolute;
        top: 123px;
        left: 111px;
        animation: tuB 2s linear infinite;
      }
​
      .rtMove .guangA {
        position: absolute;
        top: 309px;
        left: 279px;
        animation: guangA 1.3s linear infinite;
      }
​
      .rtMove .guangB {
        position: absolute;
        top: 263px;
        left: 239px;
        animation: guangB 1.1s linear infinite;
      }
​
      .rtMove .lingxA {
        position: absolute;
        top: 194px;
        left: 126px;
        opacity: 1;
        animation: lingxA 2s linear infinite;
      }
​
      .rtMove .lingxB {
        position: absolute;
        top: 163px;
        left: 79px;
        opacity: 1;
        animation: lingxB 2.2s linear infinite;
      }
​
      .rtMove .lingxC {
        position: absolute;
        top: 179px;
        left: 189px;
        opacity: 1;
        animation: lingxC 1.7s linear infinite;
      }
​
      .rtMove .lingxD {
        position: absolute;
        top: 103px;
        left: 160px;
        opacity: 1;
        animation: lingxC 2.7s linear infinite;
      }
​
      .rtMove .lingxE {
        position: absolute;
        top: 104px;
        left: 95px;
        opacity: 1;
        animation: lingxB 1.2s linear infinite;
      }
​
      .rtMove .lingxF {
        position: absolute;
        top: 84px;
        left: 144px;
        opacity: 1;
        animation: lingxA 1.4s linear infinite;
      }
​
      .rtMove .chaunB {
        position: absolute;
        top: 38px;
        left: 318px;
        animation: chaunB 1.2s linear infinite;
      }
​
      .rtMove .chaunC {
        position: absolute;
        top: 60px;
        left: 318px;
        animation: chaunC 0.7s linear infinite;
      }
​
      .rtMove .tuA {
        position: absolute;
        top: 140px;
        left: 316px;
        animation: tuA 1.3s linear infinite;
      }
​
      .rtMove .tuAa {
        position: absolute;
        top: 140px;
        left: 316px;
        animation: tuAa 1.3s linear infinite;
      }
​
      .rtMove .ziA {
        position: absolute;
        top: 114px;
        left: 320px;
        animation: ziA 2.6s linear infinite;
      }
​
      .rtMove .ziB {
        position: absolute;
        top: 144px;
        left: 339px;
        animation: ziB 2s linear infinite;
      }
​
      .rtMove .ziC {
        position: absolute;
        top: 91px;
        left: 349px;
        animation: ziC 1.7s linear infinite;
      }
​
      .rtMove .ma {
        position: absolute;
        top: 247px;
        left: 303px;
      }
​
      .rtMove .tuMing {
        opacity: 0;
        animation: tuMing 0.6s linear infinite;
      }
​
      .rtMove .ren {
        position: absolute;
        top: 283px;
        left: 330px;
      }
    </style>
  </head>
  <body>
    <div id="banner">
      <div class="an">
        <div class="maxCon">
          <div class="rtMove">
            <img class="tuB" src="./images/tuB.png" />
            <img class="guangA" src="./images/guang.png" />
            <img class="guangB" src="./images/guang.png" />
            <img class="tuC" src="./images/tuC.png" />
​
            <img class="lingxA" src="./images/lingxA.png" />
            <img class="lingxB" src="./images/lingxB.png" />
            <img class="lingxC" src="./images/lingxC.png" />
            <img class="lingxD" src="./images/lingxD.png" />
            <img class="lingxE" src="./images/lingxE.png" />
            <img class="lingxF" src="./images/lingxF.png" />
​
            <img class="chaunB" src="./images/chaunB.png" />
            <img class="chaunC" src="./images/chaunB.png" />
            <img class="tuA" src="./images/tuA.png" />
            <img class="tuAa" src="./images/tuA.png" />
​
            <img class="ziA" src="./images/ziA.png" />
            <img class="ziB" src="./images/ziB.png" />
            <img class="ziC" src="./images/ziC.png" />
​
            <img class="ma tuAn" src="./images/tuAn.png" />
            <img class="ma tuMing" src="./images/tuMing.png" />
​
            <img class="ren" src="./images/ren.png" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
​

style.css

@keyframes tuB {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes guangA {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-55px, -34px);
  }
}
@keyframes guangB {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(60px, 33px);
  }
}
@keyframes tuC {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 1;
    transform: translate(40px, 20px);
  }
}
@keyframes lingxA {
  0% {
    transform: translate(0, -8px);
  }
  100% {
    transform: translate(0, -60px);
  }
}
@keyframes lingxB {
  0% {
    opacity: 1;
    transform: translate(0, -8px);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(0, -60px);
  }
}
@keyframes lingxC {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  40% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 1;
    transform: translateY(-50px);
  }
}
@keyframes chaunB {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -70px);
  }
}
@keyframes chaunC {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -70px);
  }
}
@keyframes tuA {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -120px);
  }
}
@keyframes tuAa {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -60px);
  }
}
@keyframes ziA {
  0%,
  20%,
  40%,
  60%,
  80% {
    transform: translateY(0);
  }
  10%,
  50% {
    transform: translate(0, -4px);
  }
  30%,
  70% {
    transform: translate(0, 4px);
  }
}
@keyframes ziB {
  0%,
  20%,
  40%,
  60%,
  80% {
    transform: translateY(0);
  }
  10%,
  50% {
    transform: translate(0, 3px);
  }
  30%,
  70% {
    transform: translate(0, -3px);
  }
}
@keyframes ziC {
  0%,
  20%,
  40%,
  60%,
  80% {
    transform: translateY(0);
  }
  10%,
  50% {
    transform: translate(0, -2px);
  }
  30%,
  70% {
    transform: translate(0, 3px);
  }
}
@keyframes tuMing {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
​
avatar
文章
阅读
粉丝