旋转牧马.html+自定义鼠标样式

最新推荐文章于 2022-12-16 10:31:14 发布

顿顿不离蛋

最新推荐文章于 2022-12-16 10:31:14 发布

阅读量104

点赞数

文章标签： html css3 动画

本文链接：https://blog.csdn.net/qq_45300842/article/details/125279875

版权

自定义鼠标样式图片格式为 .cur 代码如下：

在这里插入代码片
```<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      body {
        background: url(img/BG01.jpg) no-repeat center center;
        cursor: url('img/angle64.cur'), default;
      }
      * {
        margin: 0;
        padding: 0;
      }
      #main img {
        width: 300px;
        height: 400px;
        position: absolute;
        border: 5px green double;
      }
      #main img:nth-child(1) {
        transform: translateZ(500px);
      }
      #main img:nth-child(2) {
        transform: rotateY(40deg) translateZ(500px);
      }
      #main img:nth-child(3) {
        transform: rotateY(80deg) translatez(500px);
      }
      #main img:nth-child(4) {
        transform: rotateY(120deg) translatez(500px);
      }
      #main img:nth-child(5) {
        transform: rotateY(160deg) translatez(500px);
      }
      #main img:nth-child(6) {
        transform: rotateY(200deg) translatez(500px);
      }
      #main img:nth-child(7) {
        transform: rotateY(240deg) translatez(500px);
      }
      #main img:nth-child(8) {
        transform: rotateY(280deg) translatez(500px);
      }
      #main img:nth-child(9) {
        transform: rotateY(320deg) translatez(500px);
      }

      /*# id选择器   id不能重复命名*/
      #main {
        margin: 200px auto; 
        width: 300px;
        height: 400px;
        /*3D盒子*/
        transform-style: preserve-3d;
        transform: rotateX(-10deg);
        animation-name: animate;
        animation-duration: 10s; /*动画执行次数*/
        animation-iteration-count: infinite; /*动画持续时间：无限 */
        animation-timing-function: linear;
        position: relative;
      }

      /*动画*/
      @keyframes animate {
        0% {
          transform: rotateX(-10deg) rotateY(0deg);
        }
        100% {
          transform: rotateX(-10deg) rotateY(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="main">
      <img src="img/D01.jpg" />
      <img src="img/D02.jpg" />
      <img src="img/D03.jpg" />
      <img src="img/D04.jpg" />
      <img src="img/D05.jpg" />
      <img src="img/D06.jpg" />
      <img src="img/D07.jpg" />
      <img src="img/D08.jpg" />
      <img src="img/D02.jpg" />
    </div>
  </body>
</html>