【css小动画】5月20日也是普通的一天，可以动手尝试小动画

效果图：

注：在html上引入你需要展示的图片

html代码如下：

 <ul>
    <li><img src="myself.jpg"></li>
    <li><img src="cooler.jpg"></li>
    <li><img src="yoghurt.jpg"></li>
    <li><img src="blue_color.jpg"> </li>
    <li><img src="cone.jpg"></li>
    <li><img src="strawberry.jpg"> </li>
    <li><img src="beverage.jpg"></li>
  </ul>
  <div><a href="index.html">返回主页</a></div>

注：在css上

你的背景可以是图片或者是自己选择一个背景色

 body {
      /* background-image: url(7.jpg); */
      background: rgb(207, 238, 223);
    }

css代码如下：

 <style type="text/css">
    body {
      /* background-image: url(7.jpg); */
      background: rgb(207, 238, 223);
    }

    * {
      padding: 0;
      margin: 0;
    }

    img {
      border: 0;
      width: 250px;
      height: 250px;
    }

    li {
      list-style: none;
    }

    ul {
      width: 200px;
      height: 200px;
      margin: 200px auto;
      position: relative;
      -webkit-transform-style: preserve-3d;
    }

    li {
      width: 200px;
      height: 200px;
      position: absolute;
      text-align: center;
      line-height: 200px;
      font-size: 80px;
      font-weight: bold;
      color: #fff;
    }

    li:nth-child(1) {
      -webkit-transform: rotateX(90deg) translateZ(200px);
    }

    li:nth-child(2) {
      -webkit-transform: rotateX(270deg) translateZ(200px);
    }

    li:nth-child(3) {
      -webkit-transform: rotateY(90deg) translateZ(200px);
    }

    li:nth-child(4) {
      -webkit-transform: rotateY(270deg) translateZ(200px);
    }

    li:nth-child(5) {
      -webkit-transform: translateZ(-200px);
    }

    li:nth-child(6) {
      -webkit-transform: translateZ(200px);
    }

    ul {
      -webkit-animation: run 5s linear infinite;
    }

    @-webkit-keyframes run {
      0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg)
      }

      100% {
        -webkit-transform: rotateX(360deg) rotateY(360deg)
      }
    }

    @-moz-keyframes run {
      0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg)
      }

      100% {
        -webkit-transform: rotateX(360deg) rotateY(360deg)
      }
    }

    a {
      text-decoration: none;
      color: coral;
      float: right
    }

    a:hover {
      color: red;
    }
  </style>