gpt4 book ai didi

javascript - CSS3 中的变换和 webkit 动画

转载 作者:行者123 更新时间:2023-11-28 05:49:49 25 4
gpt4 key购买 nike

我有一个 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");

https://jsfiddle.net/2eyctrpm/

关于javascript - CSS3 中的变换和 webkit 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38164393/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com