Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.01.2019, 13:31   #1
Александр121
Форумчанин
 
Регистрация: 17.09.2017
Сообщений: 265
По умолчанию Анимация css по кнопке js

Сначала должен быть пусто фон,после нажатия на кнопку начать анимацию появляется квадрат и начинает вращаться,после нажатия на кнопку удалить анимацию удаляется этот квадрат и возращаеться пустой фон





Цитата:
<!DOCTYPE html>
<html>
<head>

<style type="text/css">


.square{
width: 80px;
height: 80px;
margin: 30px auto;
background-color: #A52A2A;
animation-name: spin;
animation-duration: 2s;
}

@keyframes spin{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

</style>




</head>
<body>


<div class="square"> </div>



<script type="text/javascript">

btn1=document.createElement('BUTTON '); // создание кнопки
btn1.id='cmd1'; // id кнопки
btn1.onclick = function(){ // функция при клике по ней
}
btn1.textContent ='начать анимацию'; // имя кнопки
document.body.appendChild(btn1); // нужно для добавления кнопки

btn2=document.createElement('BUTTON '); // вторая кнопка
btn2.id='cmd2';
btn2.onclick = function(){

}
btn2.textContent ='удалить анимацию'; // имя кнопки
document.body.appendChild(btn2);
</script>
</body>
</html>
Александр121 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS анимация с текстом Pro100blich HTML и CSS 1 29.11.2018 10:16
CSS анимация anabenne HTML и CSS 0 09.02.2017 22:47
CSS анимация + ссылка spanser HTML и CSS 0 04.11.2015 10:34
Как позиционировать текст на кнопке при помощи CSS в javaFX? kroi Общие вопросы по Java, Java SE, Kotlin 0 26.02.2015 19:18
Анимация на css exoslam HTML и CSS 1 03.02.2015 13:41