所以我的基本想法是创建四个圆圈然后当用户点击该圆圈然后它应该到页面的中心然后它应该变成其他形状.

所以我使用了变换和动画属性.

这是我写的代码到现在为止.

$(".circle").click(function(){
  if($(this).hasClass('centerOfPage')){
    $(this).removeClass('centerOfPage');
  }else{
    $(this).addClass('centerOfPage');
  }
});

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
}
.one{
  background-color: red;
}
.two{
  background-color: blue;
}
.three{
  background-color: yellow;
}
.four{
  background-color: green;
}
 
 .centerOfPage{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 5%;
   -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    animation : centerOfPageAnimate 3s;
   
}
@keyframes centerOfPageAnimate {
  0% {
    top: 0%;
    left: 0%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(0,0);    
  }
  100% {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    border-radius: 5%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>

现在这里有一些你会注意到的问题..

>当您点击任何圆圈时,他们的动画将从顶角开始,而不是从它们所在的位置开始.
>当你再次点击div然后他们回到他们的位置,但它没有动画,我再次希望从其他形状的动画圈到他们相同的位置.

这是codepen相同.
谢谢.

解决方法

$('.circle').each(function () {
  $(this).data('circlePosTop',$(this).position().top);
});
		
$(".circle").click(function(){
 if($(this).hasClass('centerOfPage')){
   $(this).animate({top:$(this).data('circlePosTop'),left:0,borderRadius:'50%',height:'100px',width:'100px'}).removeClass('centerOfPage');
 } else {
   $(this).addClass('centerOfPage').animate({top:0,borderRadius:'5%',height:'100%',width:'100%'});
 }
});

• 上一篇：css – Flexbox子句溢出父级,在IE上下一篇：css – 实现多选框