5

Я сделал этот эффект в GSAP, вот ссылка Codepen:
https://codepen.io/whitelionx/full/vYGQqBZ

const svgs = document.querySelectorAll("svg");

svgs.forEach((svg) => {
  const tl = gsap
    .timeline({
      defaults: { ease: "power1.in" },
      paused: true
    })
    .to(svg.children[0], { drawSVG: "50% 50%" })
    .from(svg.children[1], { drawSVG: "0% 0%" }, 0);

  svg.addEventListener("mouseenter", () => tl.play());
  svg.addEventListener("mouseleave", () => tl.reverse());
});

Теперь я хочу сделать это только с помощью CSS, чтобы при наведении курсора на svg я получал тот же эффект, вот мой код в sandbox:

https://codesandbox.io/s/xenodochial-benz-17lss?file=/src/styles.css

Свободный перевод вопроса SVG Animation - CSS Hover Animation For SVG From The Center от участника @Nine.

1

2 ответа 2

4

Можно и на CSS... Так и не смог обойтись без дополнительных элементов в разметке ):

body { background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#0e1634; background-size:16px 16px; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;}
/* Общий контейнер и градиент-полоска*/
.on_off {
  width: 50px; height: 50px;
  background-image: linear-gradient(to right, transparent 23px, green 24px, green 26px, transparent 27px);
  background-repeat: no-repeat; background-size: 50px 3px;
  filter: drop-shadow(0 0 5px yellow);
  transition: 1s ease;
}
.on_off:hover { background-size: 50px 50px; }
/* Контейнеры для полуколец */
.on_off>i {
  position: relative; display: inline-block;
  height: 100%; width: 50%; overflow: hidden;
}
/* Градиенты-полукольца */
.on_off>i::after {
  content: ''; position: absolute;
  height: 100%; width: 100%;
  transition: 1s ease;
}
.on_off>i:first-child::after {
  left: 0; transform-origin: right center;
  background-image: radial-gradient(circle at 100% 50%, transparent 21px, red 22px, red 24px, transparent 25px);
}
.on_off:hover>i:first-child::after { transform: rotate(-.5turn); }

.on_off>i:last-child::after {
  right: 0; transform-origin: left center;
  background-image: radial-gradient(circle at 0% 50%, transparent 21px, blue 22px, blue 24px, transparent 25px);
}
.on_off:hover>i:last-child::after { transform: rotate(.5turn); }
<div class="on_off"><i></i><i></i></div>

1
  • Интересно получилось! Спасибо за оригинальный ответ 20 окт 2020 в 5:11
4

Я изменил код, чтобы вместо этого анимировать stroke-dasharray.

body {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

svg {
    width: 50px;
    height: 50px;
    margin: 25px;
}

.circle {
    stroke-dasharray: 28.3,0,28.3;
    transform-origin: 50% 50%;
    transform: rotate(180deg);
    transition: stroke-dasharray 0.5s linear;
}

.line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 0.5s linear;
}

svg:hover .circle {
    stroke-dasharray: 0,56.0;
}

svg:hover .line {
    stroke-dashoffset: 0;
}
<svg
  version="1.1"
  shape-rendering="auto"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 20 20"
  xml:space="preserve">
 <path class="circle" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1z"/>
 <path class="line" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M10,0v20"/>
</svg>

Свободный перевод ответа от участника @Robert Longson.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.