使用HTML和CSS实现鼠标悬停时文本的旋转？

最新推荐文章于 2023-02-14 08:00:00 发布

W Y L

最新推荐文章于 2023-02-14 08:00:00 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/weixin_45959525/article/details/107173031

版权

html代码
HTML：在此，我们创建了一个无序列表，并将每个字母包装在一个list-item（li）中。

<body>
  <ul>
    <li>鼠</li>
    <li>标</li>
    <li>悬</li>
    <li>停</li>
    <li>时</li>
    <li>文</li>
    <li>本</li>
    <li>的</li>
    <li>旋</li>
    <li>转</li>
  </ul>
</body>

css代码
CSS代码：首先，我们提供了一些基本样式，例如边距，填充和背景。然后，我们使用float属性将列表项水平对齐。
使用悬停选择器将每个字母沿Y轴旋转特定角度。也可以使用第n个属性来延迟每个字母的旋转

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    ul {
      padding: 50px;
      margin: 0;
      position: absolute;
      top: 20%;
      left: 25%;
    }

    ul li {
      list-style: none;
      color: pink;
      float: left;
      font-size: 40px;
      transition: 0.8s;
    }

    ul:hover li {
      transform: rotateY(360deg);
    }
  </style>