CSS动画旋转元素360度在它自己

我需要帮助!这是我的codepen

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<div class="container">
  <h1>Custom Cursor</h1>
  <div class="box">
    </div>
  </div>
</div>
  <div class="btn">
    <span style="--i:1">J</span>
    <span style="--i:2">o</span>
    <span style="--i:3">u</span>
    <span style="--i:4">e</span>
    <span style="--i:5">r</span>
    <span style="--i:6"> </span>
    <span style="--i:7">l</span>
    <span style="--i:8">a</span>
    <span style="--i:9"> </span>
    <span style="--i:10">v</span>
    <span style="--i:11">i</span>
    <span style="--i:12">d</span>
    <span style="--i:13">é</span>
    <span style="--i:14">o</span>
    <span style="--i:15"> </span>
    <span style="--i:16">-</span>
    <span style="--i:17"> </span>
    <span style="--i:18">J</span>
    <span style="--i:19">o</span>
    <span style="--i:20">u</span>
    <span style="--i:21">e</span>
    <span style="--i:22">r</span>
    <span style="--i:23"> </span>
    <span style="--i:24">l</span>
    <span style="--i:25">a</span>
    <span style="--i:26"> </span>
    <span style="--i:27">v</span>
    <span style="--i:28">i</span>
    <span style="--i:29">d</span>
    <span style="--i:30">é</span>
    <span style="--i:31">o</span>
    <span style="--i:32"> </span>
    <span style="--i:33">-</span>
    <span style="--i:34"> </span>
    <span style="--i:35">J</span>
    <span style="--i:36">o</span>
    <span style="--i:37">u</span>
    <span style="--i:38">e</span>
    <span style="--i:39">r</span>
    <span style="--i:40"> </span>
    <span style="--i:41">l</span>
    <span style="--i:42">a</span>
    <span style="--i:43"> </span>
    <span style="--i:44">v</span>
    <span style="--i:45">i</span>
    <span style="--i:46">d</span>
    <span style="--i:47">é</span>
    <span style="--i:48">o</span>
    <span style="--i:49"> </span>
    <span style="--i:50">-</span>
    <span style="--i:51"> </span>
  </div>
  <div class="triangle"></div>
  <div class="circle"></div>

body {
  background: red;
  height: 100vh;
  font-family: Bebas neue;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-family: montserrat;
  font-size: 40px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: white;
  flex-direction: column;
}
.box {
  width: 800px;
  height: 450px;
  background-color: pink;
  border: 2px solid red;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box:hover {
  cursor: none;
}
.block {
  display: block !important;
  opacity: 1 !important;
}

.btn {
  width: 138px;
  height: 138px;
  font-weight: bold;
  font-size: 30px;
  position: absolute;
  animation: loading 6s linear infinite;
  opacity: 0;
}
.triangle {
  height: 0;
  width: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 60px solid white;
  transform: translateX(-25%) translateY(-50%);
  display: none;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
}
.circle {
  border:1px solid white;
  width: 138px;
  height: 138px;
  border-radius: 50%;
 /*transform: translateX(-142.5%) translateY(-0.5%);*/
  transform: translateX(-45%) translateY(-50%);
  display: none;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
}
.btn span {
  position: absolute;
  left: 50%;
  transform-origin: 0 120px ;
  transform: translateX(0%) translateY(0%) rotateZ(calc(var(--i) * 7.05deg)); /* 360 / nbr de lettre */
  color: white;
  position: fixed;
  pointer-events: none;
  top: 50px;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

var box = document.querySelector(".box");
var btn = document.querySelector(".btn");
var circle = document.querySelector(".circle");
var triangle = document.querySelector(".triangle");

document.addEventListener("mousemove", function (e) {
  var x = e.clientX;
  var y = e.clientY;
 //triangle.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
  triangle.style.left = x + "px";
  triangle.style.top = y + "px";
});

document.addEventListener("mousemove", function (e) {
  var x = e.clientX;
  var y = e.clientY;
//  circle.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
  circle.style.left = x + "px";
  circle.style.top = y + "px";
});
document.addEventListener("mousemove", function (e) {
  var x = e.clientX;
  var y = e.clientY;
 // btn.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`;
  btn.style.left = x + "px";
  btn.style.top = y + "px";
});

box.addEventListener("mouseenter", () => {
  triangle.classList.add("block");
  circle.classList.add("block");
  btn.classList.add("block");
});
box.addEventListener("mouseleave", () => {
  triangle.classList.remove("block");
  circle.classList.remove("block");
  btn.classList.remove("block");
});

我想能够隐藏我的光标当我悬停在一个区域，当我在这个区域（在codepen这个区域是div.框）我想让一个自定义光标出现。复杂性来自于这样一个事实，我想我的三角形，圆形和圆形文本元素是在他们的中心对齐。我还想文本旋转本身。
我想我说得不远了，但文字有偏移，你能帮我吗？谢谢

看看你能用上的解决方案。
1.首先，需要创建父div .cursor，其中包含.circle、.btn和.triangle等所有元素。

<html lang="en">
  <body>
    <div class="container">
      <h1>Custom Cursor</h1>
      <div class="box"></div>
    </div>
    <div class="cursor">
      <div class="circle"></div>
      <div class="btn">
        <!-- Your spans -->
      </div>
      <div class="triangle"></div>
    </div>
  </body>
</html>

1.此新div .cursor应包含新属性：

/* Parent box, contain triangle, btn and circle */
.cursor {
position: absolute;
display: flex;

/* Center triangle in the middle */
align-items: center;
justify-content: center;

pointer-events: none;

opacity: 0;
}

1.然后你应该更新查尔兹的属性，因为它们将从父级中获取不透明度和显示。

/* Remove opacity and position absolute*/
.btn {
    width: 138px;
    height: 138px;
    font-weight: bold;
    font-size: 30px;
    animation: loading 6s linear infinite;
}

/* 
    Remove height, left, top, display (block by parent)
    change position to absolute
*/
.triangle {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 60px solid white;
    pointer-events: none;
    position: absolute;
}

/* 
    Remove left, top, display (block by parent)
    change position to absolute
*/
.circle {
    border: 1px solid white;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    pointer-events: none;
    outline: 2px solid rgb(0, 255, 191);
    position: absolute;
}

1.就像所有元素都在div .cursor中一样，现在我们只对这一个进行操作。

var box = document.querySelector(".box");

// Cursor box contain all child element, btn, circle, triangle
var cursor = document.querySelector(".cursor");

const halfSizeCircle = 138 / 2; // 69

box.addEventListener("mousemove", function (e) {
    // Get coordinate middle of the mouse inside div .box
    var [x, y] = [e.clientY - halfSizeCircle, e.clientX - halfSizeCircle];

    cursor.style.top = x + "px";
    cursor.style.left = y + "px";
});

// Remove class .block
box.addEventListener("mouseleave", () => cursor.classList.remove("block"));

// Add class .block
box.addEventListener("mouseenter", () => cursor.classList.add("block"));

希望这个解决方案对你有帮助🧙‍♂️。

CSS动画旋转元素360度在它自己

1条答案

相关问题

热门标签

最新问答