javascript - 带悬停的 CSS3 圆圈

Question

我在使用 CSS3 创建此效果时遇到问题。我知道这是可能的，但我不知道该怎么做。我们使用 Javascript ( https://vimeo.com/104875594 ) 创建了它。你们中有人可以提供帮助吗？

问题是当你在圆圈中从左到右时，旋转动画会向后运行，因为你的主要位置在顶部。我们需要它旋转 360 度，而不仅仅是 180 度。

谢谢。

您可以在此处查看代码:http://codepen.io/Seierup/pen/laEiB

<div class="about">
    <div class="about-circle">
        <div class="box-container">
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div id="indicator-wrapper">
                <div class="arrow-Wrapper"></div>
                <div id="logo">R</div>
            </div>
        </div>
    </div>
</div>

CSS

.about .about-circle .box-container {
  width: 100%;
  height: 680px;
  background: #F7F7F7;
  position: relative;
}
.about .about-circle .box-container .box {
  padding-top: 20px;
  width: 50%;
  height: 50%;
  position: relative;
  float: left;
  border: 1px solid #333;
  text-align: center;
}
.about .about-circle #indicator-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -75px;
}
.about .about-circle #indicator-wrapper .arrow-Wrapper {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  position: relative;
  background: #ccc;
  margin: -10px;
  transition: all 300ms ease;
}
.about .about-circle #indicator-wrapper .arrow-Wrapper:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  top: 12px;
  left: -4px;
  transform: rotateZ(-46deg);
}
.about .about-circle #indicator-wrapper .arrow-Wrapper:after {
  content: "";
  position: absolute;
  background: #333;
  width: 80px;
  height: 80px;
  top: 0;
  left: 0;
  border-top-left-radius: 200px;
}
.about .about-circle #logo {
  width: 120px;
  height: 120px;
  background: #ffffff;
  z-index: 111;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: 12px;
  color: #333;
  font-size: 5em;
  font-weight: bolder;
  text-align: center;
  line-height: 120px;
}
.about .about-circle .box-container .box:nth-of-type(1):hover ~ #indicator-wrapper .arrow-Wrapper {
  transform: rotateZ(0deg);
}
.about .about-circle .box-container .box:nth-of-type(2):hover ~ #indicator-wrapper .arrow-Wrapper {
  transform: rotateZ(90deg);
}
.about .about-circle .box-container .box:nth-of-type(3):hover ~ #indicator-wrapper .arrow-Wrapper {
  transform: rotateZ(-90deg);
}
.about .about-circle .box-container .box:nth-of-type(4):hover ~ #indicator-wrapper .arrow-Wrapper {
  transform: rotateZ(180deg);
}

Answer 1

我可以看到你是新来的，所以请在未来提供一些代码和 jsfiddle，我们在这里帮助你，而不是为你做这些工作。

使用纯 CSS，您可以在 fullscreen 中做到这一点

DEMO

风格:

*{box-sizing:border-box; padding:0; margin:0;}

[id=overview]{
    width:650px;
    height:480px;
    background: #F7F7F7;
    position:relative;
}
[id=overview] img{
    width:50px;
    height:50px;
    position:relative;
    background:#333;
}
[id=overview] figcaption{
    color: #B6B6B6;
    margin-top: 10px;
}
[id=overview] figure{
    padding-top:20px;
    width:50%;
    height:50%;
    position:relative;
    float:left;
    border:1px solid #333;
    text-align:center;
}
[id=indicator-wrapper]{
    width:150px;
    height:150px;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin: -75px 0 0 -75px;
}

[class=arrow-Wrapper]{
    width: 166px;
    height: 166px;
    border-radius: 50%;
    position: relative;
    background: #ccc;
    margin:-10px;
    transition: all 300ms ease;
}

[class=arrow-Wrapper]:before,[class=arrow-Wrapper]:after{
    content:"";
    position:absolute;
}
[class=arrow-Wrapper]:before{
    width: 0;
    height: 0;
    border-bottom: 20px solid #333;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: 12px;
    left: -4px;
    transform: rotateZ(-46deg);
}
[class=arrow-Wrapper]:after{
    background: #333;
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
    border-top-left-radius: 200px;
}

[id=logo]{
    width: 120px;
    height: 120px;
    background: rgb(255, 255, 255);
    z-index: 111;
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: 12px;
    color: #333;
    font-size: 5em;
    font-weight: bolder;
    text-align: center;
    line-height: 120px;
}


[id=overview] figure:nth-of-type(1):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform: rotateZ(0deg);
}
[id=overview] figure:nth-of-type(2):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform: rotateZ(91deg);
}
[id=overview] figure:nth-of-type(3):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform: rotateZ(269deg);
}
[id=overview] figure:nth-of-type(4):hover ~ [id=indicator-wrapper] .arrow-Wrapper{
    transform: rotateZ(180deg);
}

标记:

<section id=overview>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <figure>
        <img/>
        <figcaption>
            Some Text
        </figcaption>
    </figure>
    <div id=indicator-wrapper>
        <div class=arrow-Wrapper></div>
        <div id=logo>R</div>
    </div>
</section>