在网站上的3D动画

Question

首先，我是一名本科生，在我的第三年项目中，我正在建立一个电子商务备件网站。对于高级搜索，我希望包括一个类似于以下附件的车辆图像，然后当鼠标悬停在车辆图像的不同部分上时，我需要弹出特定部分，然后“点击”我需要搜索特别的部分。能否请您提出一种方法来达到上述要求。我是否需要使用闪存或者我可以使用jquery吗？非常感谢你。

Answer 1

您可以将jQuery与CSS动画结合使用。这是非常简单的jQuery，因为您只需添加和删除类。这是我用来点击时显示不同卡片的编码器。 http://codepen.io/sketchbookkeeper/pen/dpjPrK

这是从CSS

开始的基本思路

 //CSS  for part after `open` class is added in jQuery
.part.open {
  animation-name: myAnimation;
  animation-duration: 2s;
  transform: scale(2,2);
  margin-top: 90px;
 }
 //CSS animation
 @keyframes myAnimation {
 //when the animation begins 
 0% {
   transform: scale(1,1);
   margin-top: 0px;
  }
  //when the animation is completed
  100% {
   transform: scale(2,2);
   margin-top: 90px;
  }
 }

在jQuery中

$('.part').onclick = function () {
    if ($('.part).classList.contains('open')) {
       $(',part).remove('open');
    } else {
       $('.part').add('open');
    }
};

您可以展开此方法，以便在单击部件时显示或隐藏搜索栏。在我的笔中，我使用jQuery也将卡片放在窗口中心。