Hướng dẫn css circle border animation hover - hoạt hình đường viền vòng tròn css di chuột

Ai đó có thể giúp tôi thực hiện hiệu ứng di chuột này không

• nó là một vòng tròn bình thường
• Và khi vượt qua nó, tôi muốn nó nhìn theo cách đó và thậm chí để vòng tròn xoay

Cảm ơn trước

Đã hỏi ngày 5 tháng 6 năm 2021 lúc 0:05Jun 5, 2021 at 0:05

4

Nếu tôi hiểu bạn một cách chính xác, đây là một cách bạn có thể thực hiện công việc này.

Có 3 yếu tố cho điều này; Hình ảnh, vòng tròn và khoảng cách.

• Vòng tròn là một div với một Radius biên giới để làm tròn nó, và một đường viền với màu sắc của sự lựa chọn của bạn.
• Khoảng cách là một div là chiều cao đầy đủ của trình bao bọc và chiều rộng của khoảng cách dự định. Div được cho cùng màu với nền (màu trắng trong trường hợp này - thay đổi thành bất cứ điều gì bạn muốn). Sau đó, chúng tôi áp dụng một phép biến đổi -30deg để có được góc trong ví dụ của bạn.
• Hình ảnh là một div với một Radius biên giới và được định vị ở giữa của trình bao bọc.

CSS sau đó sử dụng các khung chính để thêm hình ảnh động vào Gap Div để làm cho nó xoay khi bạn di chuột qua trình bao bọc. Điều này cho ảo ảnh của vòng tròn xoay.

.wrapper {
  position: relative;
  height: 350px;
  width: 350px;
}

.wrapper .circle {
  position: absolute;
  height: 340px;
  width: 340px;
  border: 5px solid #00C17F;
  border-radius: 50%;
}

.wrapper .gap {
  position: absolute;
  width: 100px;
  height: 350px;
  left: 125px;
  background: white;
  -ms-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.wrapper:hover .gap {
  display: block;
  -webkit-animation: rotateCircle 20s linear infinite;
  -moz-animation: rotateCircle 20s linear infinite;
  -ms-animation: rotateCircle 20s linear infinite;
  -o-animation: rotateCircle 20s linear infinite;
  animation: rotateCircle 20s linear infinite;
}

.wrapper .image {
  position: absolute;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Light_Work_%28Unsplash%29.jpg");
  background-size: cover;
  background-position: right;
  border-radius: 50%;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
}

@keyframes rotateCircle {
  from {
    -ms-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  to {
    -ms-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -webkit-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
}

Đã trả lời ngày 5 tháng 6 năm 2021 lúc 1:36Jun 5, 2021 at 1:36

1

Bạn có thể chỉ có một phần tử HTML. Nhưng bạn cần 3 lớp:

1. giữ vòng tròn màu xanh lá cây
2. giữ hình ảnh
3. tạo ra các khoảng trống bằng cách ghi đè lên một phần của vòng tròn

Lớp 3 cũng có thể được thực hiện để xoay khi di chuột.

CSS cho phép bạn đính kèm trước và sau các phần tử giả vào các phần tử như DIV (mặc dù không phải là các phần tử IMG bình thường, do đó chúng tôi sử dụng DIV).

Bằng cách này, chúng tôi có 3 lớp của chúng tôi. Chúng tôi sử dụng chính div để hiển thị vòng tròn màu xanh lá cây và phía trên nó (theo thuật ngữ Z-index), chúng tôi đặt một phần tử giả tạo ra các khoảng trống bằng cách có một hình nền độ dốc Conic. Điều này chỉ bật lên khi người dùng di chuyển. Phần tử giả khác giữ hình ảnh với bộ chỉ số z để nó ở trên các phần khác và không bị ảnh hưởng bởi độ dốc hình nón xoay.

Lưu ý rằng tất cả các đơn vị được sử dụng ở đây là tương đối nên mã có phản hồi.

.circle {
  --gap: 30deg; /* set this to what you want the gap to be */
  --border: 2px; /* set this to what you want the width of the green in the border to be can be in vmin for example for full responsiveness */
  position: relative;
  border: solid green var(--border);
  border-radius: 50%;
  width: 50vmin;
  height: 50vmin;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.circle::before, .circle::after {
  content: '';
  border-radius: 50%;
  position: absolute;
  margin: 0;
  padding: 0;
}
.circle::after {
  /* position and center the image */
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 70%;
  height: 70%;
  background-image: url(https://picsum.photos/id/0/400/400);
  background-size: cover;
  border-radius: 50%;
  border-style: solid;
  z-index: 2; 
}
.circle:hover::before {
  width: calc(100% + (3 * var(--border)));/* make it slightly bigger to make sure a 'stray' screen pixel does not get left out when the system converts part CSS px to screen pixels */
  height: calc(100% + (3 * var(--border)));
  top: calc(-1.5 * var(--border));
  left: calc(-1.5 * var(--border));
  z-index: 1;
  background-image: conic-gradient(white 0deg, white var(--gap), transparent var(--gap), transparent 180deg, white 180deg, white calc(180deg + var(--gap)), transparent calc(180deg + var(--gap)), transparent 360deg);
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Đã trả lời ngày 5 tháng 6 năm 2021 lúc 6:32Jun 5, 2021 at 6:32

Một Hawortha HaworthA Haworth

26.7K3 Huy hiệu vàng9 Huy hiệu bạc13 Huy hiệu đồng3 gold badges9 silver badges13 bronze badges

0