Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2021, 15:44
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Как повернуть анимацыю в другую сторону
Здравствуйте, скажите пожадуйста как отразить анимацыю в другую сторону
<svg width="220" height="220" padding="0">
	<circle class="myCircle" />
</svg>
<style>
	.myCircle {
		margin: 0;
		cx: 110;
		cy: 110;
		r: 100;
		stroke-dasharray: 0 calc(2*3.14*100);
		fill: none;
		stroke: #333;
		stroke-width: 20;
		transition: 1s;
	}
	svg:hover .myCircle {
stroke-dasharray: calc(2 * 3.14 * 100 / 4) calc(2 * 3.14 *100 * 3 / 4);
	}
</style>

Можно использовать отражение scaleY(-1) но существуют ли методы удобнее

Последний раз редактировалось fori, 05.02.2021 в 17:48.
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2021, 16:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

fori,
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2021, 17:27
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Ето и есть минимальний код, — при наведении выплывает черная полоска вниз, в направлении от 2 к 4 получверти, как сделать выплывание наоборот от 2 к 1 получверти...
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2021, 18:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

fori,
<svg width="220" height="220" padding="0">
    <circle class="myCircle" />
</svg>
<style>
    .myCircle {
        margin: 0;
        cx: 110;
        cy: 110;
        r: 100;
        stroke-dasharray: calc(2 * 3.14 * 100 ) ;
        fill: none;
        stroke: #333 ;
        stroke-width: 20;
        transition: 1s;
        stroke-dashoffset: calc(2 * 3.14 * 100 );
    }
    svg:hover .myCircle {
stroke-dasharray: calc(2*3.14*100) calc(2 * 3.14 * 75 );
    }
</style>

Последний раз редактировалось рони, 05.02.2021 в 18:59.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать так чтобы при клике на картинку она менялась на другую? Человедо Общие вопросы Javascript 3 02.07.2018 01:39
Как передать состояние checkbox'ов на другую страницу SkyRewir Общие вопросы Javascript 8 24.07.2017 10:32
Как перенести картинку с одной страницы на другую? myautosaler Общие вопросы Javascript 1 02.08.2015 14:15
Как округлить число в меньшую сторону с заданной точностью? barcelona Общие вопросы Javascript 2 19.08.2009 12:07
Раскрывающееся меню, как переставить на другую сторону? Resager Events/DOM/Window 8 22.08.2008 21:56