我有几个带有文本的div,这些文本已应用了震动动画。单击按钮,它会使div震动。但是,我注意到这样做时文本不会保持清晰,而在div摇动时它会淡入淡出。当div晃动时,如何使文本保持清晰?这是我的代码:
$('.btn').click(function () {
$('.card').addClass('card-hover')
setTimeout( function() {
$('.card').removeClass('card-hover')
}, 1000);
});
body {
background: #aaa;
}
.card-box{
display: grid;
grid-template-columns: 50% 50%;
width: 600px;
// border: 2px solid red;
}
.btn {
margin: 40px 50px 0px 235px;
height: 40px;
width: 140px;
border: 2px solid #000;
border-radius: 20px;
}
.btn:hover{
background-color: #888;
}
.card {
margin: 50px 0px 0px 50px;
height: 300px;
width: 210px;
border: 2px solid #000;
border-radius: 20px;
// background-color: #fff;
background-color: #cce6ff;
display: inline-block;
}
.card-hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.verse-text {
font-family: 'Roboto', sans-serif;
padding: 8px;
margin-top: 10px;
text-align: left;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-box">
<div class="card">
<div class="verse-text">
The Riemann hypothesis has thus far resisted all attempts to prove it. Stieltjes (1885) published a note claiming to have proved the Mertens conjecture with c=1, a result stronger than the Riemann hypothesis and from which it would have followed.
</div>
</div>
<div class="card">
<div class="verse-text">
The Riemann hypothesis was computationally tested and found to be true for the first 200000001 zeros by Brent et al. (1982), covering zeros sigma+it in the region 0 < t <81702130.19).
</div>
</div>
</div>
<input type="button" class="btn" value="Shake">
答案 0 :(得分:0)
$('.btn').click(function () {
$('.card').addClass('card-hover')
setTimeout( function() {
$('.card').removeClass('card-hover')
}, 1000);
});
body {
background: #aaa;
}
.card-box{
display: grid;
grid-template-columns: 50% 50%;
width: 600px;
// border: 2px solid red;
}
.btn {
margin: 40px 50px 0px 235px;
height: 40px;
width: 140px;
border: 2px solid #000;
border-radius: 20px;
}
.btn:hover{
background-color: #888;
}
.card {
margin: 50px 0px 0px 50px;
height: 300px;
width: 210px;
border: 2px solid #000;
border-radius: 20px;
// background-color: #fff;
background-color: #cce6ff;
display: inline-block;
}
.card-hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.card-hover .verse-text {
animation: shakeText 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes shakeText {
10%, 90% {
transform: translate3d(1px, 0, 0);
}
20%, 80% {
transform: translate3d(-2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(4px, 0, 0);
}
40%, 60% {
transform: translate3d(-4px, 0, 0);
}
}
.verse-text {
font-family: 'Roboto', sans-serif;
padding: 8px;
margin-top: 10px;
text-align: left;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-box">
<div class="card">
<div class="verse-text">
The Riemann hypothesis has thus far resisted all attempts to prove it. Stieltjes (1885) published a note claiming to have proved the Mertens conjecture with c=1, a result stronger than the Riemann hypothesis and from which it would have followed.
</div>
</div>
<div class="card">
<div class="verse-text">
The Riemann hypothesis was computationally tested and found to be true for the first 200000001 zeros by Brent et al. (1982), covering zeros sigma+it in the region 0 < t <81702130.19).
</div>
</div>
</div>
<input type="button" class="btn" value="Shake">