Как начать анимацию при нажатии

У меня есть кнопка на моей странице с надписью «Темная тема». Я хотел бы сделать так, чтобы эта кнопка меняла эффект фона. Когда вы нажимаете его, я хочу, чтобы у него был эффект радуги, и когда вы снова нажмете его, я хочу, чтобы он вернулся к темной теме. Я приложил соответствующий код для этого:Как начать анимацию при нажатии

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow-y: scroll; 
 
    font-family: Helvetica; 
 
    font-size: 18px; 
 
    background-color: #bdbdbd; 
 
    background-color: #45CEEF; 
 
    -webkit-animation: pulse 1s infinite alternate; 
 
} 
 

 
h3 { 
 
    font-weight: bold; 
 
    text-decoration: underline; 
 
} 
 
h2 { 
 
    font-weight: bold; 
 
    text-decoration: underline; 
 
} 
 

 
/*Light Switch*/ 
 

 
label { 
 
    display: block; 
 
    height: 25px; 
 
    width: 100px; 
 
    background: white; 
 
    text-align: center; 
 
    font: 14px/25px Helvetica, Arial, sans-serif; 
 
    margin: 20px 0; 
 
    position: absolute; 
 
    color: black; 
 
    transition: background 0.2s ease-out, color 0.2s ease-out; 
 
} 
 
label:hover { 
 
    background-color: #099; 
 
    color: white; 
 
    cursor: pointer; 
 
    transition: background-color 0.1s ease-in, color 0.1s ease-in; 
 
} 
 
input#lightswitch { 
 
    position: fixed; 
 
    top: -9999px; 
 
    left: -9999px; 
 
} 
 
input#lightswitch + .content { 
 
    color: black; 
 
    transition: background-color 0.5s ease-out, color 0.5s ease-out; 
 
} 
 
/*Switched Off*/ 
 

 
input#lightswitch:checked + .content { 
 
    background-color: #222; 
 
    color: #D3D3D3; 
 
    transition: background-color 0.5s ease-in, color 0.5s ease-in; 
 
} 
 
@-webkit-keyframes pulse { 
 
    0% { 
 
    background-color: #45CEEF; 
 
    } 
 
    25% { 
 
    background-color: #FFF5A5; 
 
    } 
 
    50% { 
 
    background-color: #FFD4DA; 
 
    } 
 
    75% { 
 
    background-color: #99D2E4; 
 
    } 
 
    100% { 
 
    background-color: #D8CAB4; 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="bda.css"> 
 

 
<body class="body"> 
 
    <label for="lightswitch">Dark Theme</label> 
 
    <input type="checkbox" id="lightswitch" /> 
 
</body>

Мой код: https://jsfiddle.net/em07jce9/1/

источник

2015-08-29 Amorris

Пожалуйста, как * отношение * код прямо в ваш вопрос. – nnnnnn

Анимация работает с webkit, поэтому она не будет отображаться в Firefox – MinusFour

Когда кнопка нажата, используйте Javascript, чтобы добавить класс CSS для элемента, который вы хотите анимировать , В своей таблице стилей присоедините анимацию к этому конкретному классу.

CSS:

.body.animated { 
    -webkit-animation: pulse 1s infinite alternate; 
}

JS:

$(function() { 
    $('button').on('click', function() { 
    $('.body').addClass('animated'); 
    }); 
});

Если вы используете флажок в качестве переключателя, используйте change событие:

$(function() { 
    $('input#lightswitch').on('change', function() { 
    $('.body').toggleClass('animated'); 
    }); 
});

источник

2015-08-30 00:44:22 Jeriko

Как начать анимацию при нажатии

ответ

Смежные вопросы