我有一个 JS 脚本，可以自动调整图像大小，还有一个用于 BounceIn 效果的 CSS3 动画。它们单独工作效果很好，但不能一起使用。我如何将这两种效果结合起来？这是 HTML/JS 代码
</head>
<body>
<div class="container-fluid perso" id="container">
<center>
<img class="img-responsive row" src="../img/row.png">
</center>
<img class="img-responsive button1 bounceIn" id="button1" src="../img/button.png">
</div>
<script>
var $el = $("#button1");
var $container=$("#container");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();
var wHeight1 = $container.height();
var wWidth1 = $container.width();
ratioHeight=elHeight/wHeight1;
ratioWitdh=elWidth/wWidth1;
$(window).resize(function () {
var scale;
var wHeight2 = $container.height();
var wWidth2 = $container.width();
var elHeight2=ratioHeight*wHeight2;
var elWidth2=ratioWitdh*wWidth2;
scale = (elHeight/elWidth)/(elHeight2/elWidth2);
$el.css({
transform: "scale(" + scale + ")"
});
});
</script>
这是 CSS 代码:
.img-responsive.button1.bounceIn
{
position:absolute;
left:75%;
top:50%;
transform: scale(1);
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
感谢您的帮助!
最佳答案
我没有看到效果，我把代码复制到了jsfiddle但是不起作用，是否可以看看你对这两行代码的看法是什么
var $el = $("#button1");
var $container=$("#container");
关于javascript - CSS3 中的变换和 webkit 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38164393/