Question

我制作了这个css / html徽标，它有2个半圆圈，我想为它们设置动画...我希望它们“改变”位置，但不能做出线性动画，我想要一个半圆转换< / p>

任何人都可以帮助我吗？一个建议？

HTML：

<div class="logo">
  <div class="halfCircle right"></div>
  <div class="name">
    <h1>Regulus</h1>
 </div>
 <div class="halfCircle left"></div>

以下是：http://jsfiddle.net/6cY7x/

Answer 1

这是CSS

.halfCircle{
     height:60px;
     width:27.5px;
     border-radius: 90px 0 0 90px;
     -moz-border-radius: 90px 0 0 90px;
     -webkit-border-radius: 90px 0 0 90px;
    background:black;
    position: absolute;
    left: 60px;
    top: 30px;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s; 
}
.right{
  transform:rotate(55deg)  translateY(70px);
  -webkit-transform:rotate(55deg)  translateY(70px); 
}
.left{
    -webkit-transform:rotate(-125deg)  translateY(70px); 
    transform:rotate(-125deg) translateY(70px);
}
.logo:hover .right {
    transform:rotate(235deg)  translateY(70px);
    -webkit-transform:rotate(235deg)  translateY(70px); 
}
.logo:hover .left{
    -webkit-transform:rotate(55deg)  translateY(70px); 
    transform:rotate(55deg) translateY(70px);
}

.logo{
    width:150px;
    height:100px;
    position: relative;
}

.name h1{
  font-family: serif;
  margin: 0px;
    text-align: center;
    padding-top: 40px;
}

demo

Answer 2

这是我如何去做的。我没有单独旋转.halfCircle，而是将它们放在一个像徽标一样大的容器中。徽标本身我在顶部和底部给出了60px的填充，为文本周围的.halfCircle提供了空间。

HTML：

<div class="logo">
  <div class="Circle">
    <div class="halfCircle right"></div>
    <div class="halfCircle left"></div>
  </div>
  <div class="name">
    <h1>Regulus</h1>
  </div>
</div>

CSS：

.logo{
  width:150px;
  position: relative;
  padding: 60px 0;
}

.Circle {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  transform: translateZ(0);
  transition: all 800ms ease-out;
}

然后将半圈定位到其斑点的绝对位置，而不是float和margin。这样可以在以后更轻松地调整和缩放徽标。

.halfCircle{
  position: absolute;
  height: 60px;
  width: 27.5px;
  border-radius: 90px 0 0 90px;
  background: black;
}
.right{
  top: 0;
  right: 0;
  transform:rotate(55deg);
}

.left{
  transform:rotate(-125deg);
  left: 0;
  bottom: 0;
}

然后，在:hover上，我们只需将.Circle元素旋转180度并进行预设！没有神奇的数字，只是一个简单的半旋转。

.logo:hover .Circle {
  transform: rotate(180deg);
}

演示： http://codepen.io/shshaw/pen/Hrlqx

如何在html / css中为两个div设置动画以进行半圆转换？

2 个答案:

HTML：

CSS：