Question

我一直试图运行一些简单的css实验来转换用css创建的形状。

我可以用jQuery做得很好，但是我想尽可能减轻我想到的实际项目的重量。我已经使用Google了很多（和W3schools）来了解所有这些，但我开始怀疑这些天是不是每个人都只使用jQuery。

反正。我想扩大一个圆圈看起来更像胶囊。代码如下。

不确定我错过了什么。只需要圆圈就可以获得700px的宽度。它目前无法在任何浏览器中使用。虽然它需要在所有IE浏览器中工作。

Answer 1

不确定您希望圈子展开的是什么事件，但这里是一个圈子扩展到“胶囊”的示例＆＃39;形状onHover只使用CSS：https://jsfiddle.net/1cdatxq2/

#circle {
    width: 300px;
    height: 300px;
    background: orange;
    -moz-border-radius: 300px;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    transition: width .5s;
}

#circle:hover{
    width: 700px;
}

Answer 2

更灵活的将是动画的变体，我认为

#circle {
  width: 150px;
  height: 150px;
  background: orange;
  border-radius: 300px;
  animation: run 2s
}

@keyframes run {
  0% {
    width: 200px
  }
  25% {
    width: 300px
  }
  50% {
    width: 400px
  }
  75% {
    width: 500px
  }
}

示例here

转换CSS中的形状不起作用

2 个答案: