Реализация раскрывающейся кнопки

@trebushe · Регистрация: 08.07.2016

Студворк — интернет-сервис помощи студентам

Добрый день, можете объяснить пожалуйста, как сделать кнопку при наведении на которую она будет как бы "расцветать" как цветок, у меня уже нарисована кнопка(все ее положения) но я не знаю, как это выполнить в коде. Что и куда, буду благодарен за помощь!

@Karmisha · 14.07.2016, 14:06

Ну так кнопки в студию. Мы же не экстрасенсы.

@trebushe · 14.07.2016, 14:22 **[ТС]**

вот

@trebushe · 14.07.2016, 14:33 **[ТС]**

Karmisha, м?

@Karmisha · 14.07.2016, 14:40

Если честно, первый раз с таким встречаюсь. Могу только посоветовать, т.к. у самого нет времени разбираться. Попробуй что-то с @framekey

@boilzzz · 14.07.2016, 15:17

trebushe, Делается это с помощью.
https://jsfiddle.net/htf2u191/

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes button {
from {background:red;}
50% {background:green;}
to {background:blue;}
}
.h {
width:100px;
height:100px;
background:red;
}
.h:hover{
  -webkit-animation: button 2s infinite ease-in-out;
animation: button 2s infinite ease-in-out;
}

HTML5
1
2
3
4
<div class="h">
 
 
</div>

Добавлено через 1 минуту
В @keyframes вам надо расписать % под все ваши картинки кнопок.

@aj17 · 14.07.2016, 16:52

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
    width: 87px;
    height: 80px;
    background: url(home1.jpg) 0 1200px;
}
 
@keyframes button {
  100% { background-position: left 0; }
}
 
.box:hover {
    animation: button 1s steps(15) infinite;
}

HTML5
1
<div class="box"></div>

Только укажите путь к картинке свой в селекторе .box

@parison · 29.08.2016, 19:26

boilzzz, крутая тема заберу , спасибо .

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@trebushe 0 / 0 / 0 Регистрация: 08.07.2016 Сообщений: 61

	Реализация раскрывающейся кнопки 14.07.2016, 13:35. Показов 2067. Ответов 7 Метки нет (Все метки) Добрый день, можете объяснить пожалуйста, как сделать кнопку при наведении на которую она будет как бы "расцветать" как цветок, у меня уже нарисована кнопка(все ее положения) но я не знаю, как это выполнить в коде. Что и куда, буду благодарен за помощь! 0

@Karmisha 2 / 2 / 1 Регистрация: 04.07.2013 Сообщений: 27
	14.07.2016, 14:06
	Ну так кнопки в студию. Мы же не экстрасенсы. 0

@trebushe 0 / 0 / 0 Регистрация: 08.07.2016 Сообщений: 61
	14.07.2016, 14:22 [ТС]
	вот Миниатюры 0

@trebushe 0 / 0 / 0 Регистрация: 08.07.2016 Сообщений: 61
	14.07.2016, 14:33 [ТС]
	Karmisha, м? 0

@Karmisha 2 / 2 / 1 Регистрация: 04.07.2013 Сообщений: 27
	14.07.2016, 14:40
	Если честно, первый раз с таким встречаюсь. Могу только посоветовать, т.к. у самого нет времени разбираться. Попробуй что-то с @framekey 0

@parison -10 / 0 / 0 Регистрация: 12.08.2016 Сообщений: 28
	29.08.2016, 19:26
	boilzzz, крутая тема заберу , спасибо . 0