鼠标移入文字旋转

最新推荐文章于 2024-09-11 20:31:47 发布

hyf77

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量80

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/hyf77/article/details/136248022

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="circle-container">
    <div class="circle">
      <span>Text</span>
    </div>
  </div>
  

      
</body>

<style>
  .circle-container {
  width: 200px; /* 可以根据需要调整容器的大小 */
  height: 200px;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.circle {
  width: 100%;
  height: 100%;
  background-color: lightblue; /* 背景颜色可以根据需要调整 */
  border-radius: 50%; /* 将 div 变成圆形 */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* 文字颜色可以根据需要调整 */
}

.circle-container:hover .circle {
  transform: rotate(360deg); /* 鼠标悬停时旋转 div */
}

</style>

</html>