我在使用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);
}
答案 0 :(得分:2)
我可以看到你是新来的,所以请在将来提供一些代码和jsfiddle,我们在这里帮助你不要为你工作。
使用Pure CSS,您可以在fullscreen
中执行此操作STYLE:
*{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);
}
MARKUP:
<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>
答案 1 :(得分:0)
不知道这是否正是您正在寻找的东西,但它可以作为如何旋转360度左右的一个很好的参考。你可以使用
transform:rotate(-1turn); //或顺时针转动正数
以下是整个例子。
http://demosthenes.info/blog/860/Animating-Elements-In-Arcs-Circles-and-Ellipses-With-CSS