个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我的页面上有一个按钮，标签为“深色主题”。我想让这个按钮改变背景的效果。当你点击它时，我希望它有彩虹效果，当你再次点击它时，我希望它回到黑暗主题。我附上了相关代码:
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>最佳答案
单击按钮时，使用 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');
});
});
关于javascript - 如何在点击时启动动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32291738/
29
4
0
我是一名优秀的程序员,十分优秀！