我有一个按钮，当用户点击它时它会翻转。 问题是我不希望文本随按钮翻转。 (我用js在用户点击按钮的时候应用了一点css)
function clickFunction() {
var change = document.getElementById("btn");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
change.style.border = "4px solid #fff";
change.style.background = "#00E676";
change.style.animation = "anim 1s";
}
}button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
color: #fff;
background: #01579B;
border: 4px solid #01579B;
border-radius: 100px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
@keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}<body>
<button id="btn" onclick="clickFunction()" type="button">Send</button>
<script src="click.js"></script>
</body>最佳答案
最简单的方法可能是在按钮后面放置一个 div。
然后按钮本身只获取文本，点击更改 div 背景。
所以你会有这样的东西:
<body>
<div class="btn">
<div id="bg-button" class="bg-button"></div>
<button id="btn" onclick="clickFunction()" type="button">Send</button>
</div>
<script src="click.js"></script>
</body>
CSS:
.btn{
position: relative;
height:80px;
overflow:hidden;
}
button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
background-color:rgba(0, 0, 0, 0);
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
position: absolute;
border: none;
top:0;
color: #fff;
width: 100%;
height:100%;
}
.bg-button {
background: #01579B;
border-radius: 100px;
top:0;
width: 100%;
height: 100%;
}
@keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}
Js:
function clickFunction() {
var change = document.getElementById("btn");
var bg = document.getElementById("bg-button");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
bg.style.background = "#00E676";
bg.style.animation = "anim 1s";
}
}
关于javascript - 如何在 onClick 时不在按钮的文本上应用动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50315477/