На многих сайтах стали появляться эффекты вращения окружностей с симметрично вырезанными
небольшими участками. Смотрится хорошо. Как повторить данный эффект?
У меня получилось вырезать один сегмент с помощью атрибутов stroke-dasharray
Ниже код:
.txt1 {fill:white; pointer-events:none;}
.rect {fill:gray;}
.txt1:hover {fill:white;}
.rect:hover {fill:black; transition:fill 0.5s all;}
Как вырезать второй симметричный сегмент и заставить их вращаться при наведении на
надпись?
Update
Добавлен новый ответ:
вариант - только HTML и CSS @UModeL
Дополнительные условия для конкурса:
Было бы очень интересно получить ответы с решением CSS, JS реализующие анимации,
как в ответе анимации с SVG
Вращение одного сегмента
Техника создания анимаций фигур с количеством сегментов больше двух
Анимация симметричного заполнения фигур из одной точки
Предпочтения в выборе победителя при равенстве решений, будут отданы ответу с хорошо
комментированным кодом.
Ответы с применением плагинов, сторонних библиотек, как конкурсный ответ приниматься
не будут.
UPDATE 24.02.2019 г.
Поздравляю победителя конкурса UModeL
Выполнены все непростые условия конкурса!
Я уверен, что многие люди со временем будут возвращаться вновь и вновь в этот топик,
чтобы использовать оригинальные решения автора ответа. Весь код очень подробно и доступно
прокомментирован, что облегчает восприятие и освоение интересных комбинаций различных
техник решения.
Ответы
Ответ 1
Только HTML и CSS. Border-color и rotate псевдоэлемента
Сразу оговорюсь, что SVG предлагает намного большие возможности, по части форм и
анимации (что видно из соседних ответов). Правда, есть пара минусов - это утяжеление
кода разметки (при этом, стили и скрипты никто не отменял) и изучение SVG (хотя "порог
входа" не высок, но с ходу понять не так просто).
Для простых фигур, достаточно минимальной HTML-разметки, всё остальное же достигается
с помощью CSS:
.spin,
.spin:after {
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
box-sizing: border-box;
/* Толщина окружности */
border: 3px solid grey;
border-radius: 50%;
border-color: grey transparent grey transparent;
}
.spin {
position: relative;
margin: 10px 8px;
/* Начальный угол */
transform: rotate(0deg);
transition: 1.5s ease;
}
.spin:after {
content: '';
position: absolute;
z-index: 1;
top: -3px;
left: -3px;
/* Размер зазоров */
transform: rotate(65deg);
}
#spin {
width: 0;
height: 0;
border: none;
position: absolute;
}
#spin:hover+.spin {
transform: rotate(720deg);
}
label {
display: inline-block;
height: 38px;
vertical-align: middle;
border-radius: 10px;
font: 20px/40px "Times New Roman";
text-align: center;
transition: .3s ease;
background: grey;
color: white;
}
label:hover {
background: black;
}
Лоадер
Создание можно разделить на несколько этапов:
Создаём в HTML-разметке блок ;
Создаём в CSS правило .spin, .spin:after {} и добавляем следующие свойства:
width и height - указываем одинаковые значения для ширины и высоты;
box-sizing: border-box; - чтобы толщина рамки не влияла на окружающие элементы;
border: 3px solid grey; - собственно, рамка с указанием толщины;
border-radius: 50%; - скругляем углы элемента, превращая т.о. в круг;
(Внимание! Магия:) Указываем разным сторонам рамки разный цвет. В данном случае,
требуется задать, попарно для параллельных сторон, прозрачность и основной цвет - border-color:
grey transparent grey transparent;.
Создаём правило .spin {} со свойствами:
position: relative; - для правильного позиционирования псевдоэлемента;
transform: rotate(0deg); - угол поворота в исходном положении блока;
transition: 1.5s ease; - задаём переход, чтобы происходила плавная анимация вращения,
а не резкий скачок от начального положения к конечному
Создаём правило .spin:after {} и свойства:
position: absolute; z-index: 1; top: -3px; left: -3px; - размещаем и выравниваем
псевдоэлемент относительно основного блока;
(Внимание! Магия:) С помощью transform: rotate(65deg); задаём угол поворота псевдоэлемента,
тем самым меняя ширину зазоров.
Принцип станет понятнее, если запустить пример ниже и подвигать ползунки:
var oControl=document.querySelector('.control'),oCode=document.querySelector('.code>pre');oControl.addEventListener('input',function(ev){document.documentElement.style.setProperty(`--${ev.target.id}`,ev.target.value);if(ev.target.id=='spin_width'){oCode.innerText=oCode.innerText.replace(/border:
\d+px/gi,`border: ${ev.target.value}px`)};if(ev.target.id=='spin_angle'){oCode.innerText=oCode.innerText.replace(/(угол[\s\S]+?rotate\()[-\d]+(deg\))/gi,`$1${ev.target.value}$2`)};if(ev.target.id=='spin-a_angle'){oCode.innerText=oCode.innerText.replace(/(зазоров[\s\S]+?rotate\()[-\d]+(deg\))/gi,`$1${ev.target.value}$2`)}});oControl.addEventListener('mouseover',function(ev){if(ev.target.id=='spin-a_angle'){document.documentElement.style.setProperty(`--spin-a_color`,'rgba(255,
0, 0, 0.5)')};if(ev.target.tagName=='INPUT'){oCode.className=ev.target.id}});oControl.addEventListener('mouseout',function(ev){if(ev.target.id=='spin-a_angle'){document.documentElement.style.setProperty(`--spin-a_color`,'rgba(128,
128, 128, 1)')}})
:root{--spin_color:rgba(128,128,128,1);--spin-a_color:rgba(128,128,128,1);--spin_width:3;--spin_angle:0;--spin-a_angle:65;--code-top:.2em}.wrapper_621x183{position:relative;display:block;width:621px;height:183px;min-width:621px;min-height:183px;max-width:621px;max-height:183px;margin:0
auto;border:0 dashed #ccc}.control{position:absolute;z-index:10;top:10px;right:10px;display:inline-flex;flex-flow:column
nowrap;background:rgba(230,230,230,1);box-shadow:2px 10px 20px -7px rgba(0,0,0,.3);padding:5px;border-radius:5px;font:12px/20px
'Arial';text-align:center}.code{position:absolute;z-index:5;bottom:1px;left:10px;width:540px;height:98px;background:rgba(255,255,255,.9);box-shadow:inset
0 3px 23px -4px rgba(0,0,0,.3);padding:8px;border-radius:4px;overflow:hidden}.code>pre{position:absolute;top:var(--code-top);margin:0;font:13px
'Consolas','Courier New',monospace;transition:top 1.5s ease}.code>pre.spin_width{--code-top:.2em}.code>pre.spin_angle{--code-top:-8.5em}.code>pre.spin-a_angle{--code-top:-17.5em}.spin,.spin:after{display:inline-block;width:40px;height:40px;vertical-align:middle;box-sizing:border-box;border:calc(var(--spin_width)
* 1px) solid var(--spin_color);border-radius:50%}.spin{position:relative;margin:10px
8px;border-color:var(--spin_color) transparent var(--spin_color) transparent;transform:rotate(calc(var(--spin_angle)
* -1deg));transition:1.5s ease}.spin:after{content:'';position:absolute;z-index:1;top:calc(var(--spin_width)
* -1px);left:calc(var(--spin_width) * -1px);border-color:var(--spin-a_color) transparent
var(--spin-a_color) transparent;transform:rotate(calc(var(--spin-a_angle) * 1deg))}#spin{width:0;height:0;border:none;position:absolute}#spin:hover+.spin{transform:rotate(720deg)}label{display:inline-block;height:38px;vertical-align:middle;border-radius:10px;font:20px/40px
'Times New Roman';text-align:center;transition:.3s ease;background:grey;color:white}label:hover{background:black}
Комментариев нет:
Отправить комментарий