用css悬停旋转圆圈[重复]
Posted
技术标签:
【中文标题】用css悬停旋转圆圈[重复]【英文标题】：Rotate Circle with css hover [duplicate] 【发布时间】：2013-06-18 07:06:43 【问题描述】：我创建了一个简单的网站：
所以图像上方有一个圆圈，我试图在悬停时旋转它，但它根本不起作用！这是我的代码！
<div class="image" id="landkreis">
<img src="reg.png" />
<span id="motha2">
<h6><br>Here<br>i am</h6>
</span>
</div>
h6 text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
#motha2
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ;
h6:hover transform:rotate(-90deg);
更新更新！！！！！！！！！！！！！！！！！！！！！！！！！！！
好的过渡工作，但我怎样才能使孔过渡平滑，例如它首先旋转 -15 度然后旋转到 15 度并最终停止在 0 度？
【问题讨论】：
您是在任何特定浏览器中进行测试还是在所有浏览器中进行测试？ Pheeeeew 这么多人用同样的东西回答.. 您可以使用延迟转换（从一种状态转换到相同状态基本上是一种延迟） developer.mozilla.org/en-US/docs/Web/Guide/CSS/… 用于动画 【参考方案1】：如果您需要“旋转 -15 度然后旋转到 15 度并最终在 0 度停止”
你必须改变
h6:hover transform:rotate(-90deg);
到
h6:hover
-moz-animation-name: rotate 1s linear 1;
-webkit-animation-name: rotate 1s linear 1;
animation-name: rotate 1s linear 1;
@-moz-keyframes rotate
0%, 100% -moz-transform: rotate(0deg);
33% -moz-transform: rotate(15deg);
66% -moz-transform: rotate(-15deg);
@-webkit-keyframes rotate
0%, 100% -webkit-transform: rotate(0deg);
33% -webkit-transform: rotate(15deg);
66% -webkit-transform: rotate(-15deg);
@keyframes rotate
0%, 100% transform: rotate(0deg);
33% transform: rotate(15deg);
66% transform: rotate(-15deg);
【讨论】：
对不起，没用！ @EmSta：如果它不起作用，你为什么接受它？【参考方案2】：您是否尝试过使用前缀？
对于新的 CSS 属性，浏览器实现有时会略有不同。这就是不同浏览器引擎使用几个前缀的原因。
h6:hover
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform : rotate(-90deg);
请参阅caniuse.com 了解更多信息。
【讨论】：
【参考方案3】：DEMO
CSS：
div
border-radius:50%;
width:200px;
height:100px;
background-color:green;
text-align:center;
.rotate
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
.rotate:hover
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
【讨论】：
【参考方案4】：#motha2:hover
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform : rotate(7deg);
试试这个http://jsfiddle.net/VbZCX/
【讨论】：
【参考方案5】：这是工作 DEMO http://jsfiddle.net/4wLpE/1/ 但在这个例子中，它没有连续评级。如果你愿意，请告诉我。
移除 h6:hover添加
#motha2:hover
cursor:pointer;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
【讨论】：
【参考方案6】：您的示例在 Firefox 中对我来说运行良好，但可能是浏览器问题。您使用的浏览器非常依赖于您可以使用的 css3 代码。也使用浏览器前缀可能也有帮助。
在这里查看我的示例http://jsfiddle.net/yJH4W/1/ 它似乎适用于大多数现代浏览器。如果它对您不起作用，可能是因为您使用的是不支持它的旧浏览器。看看你可以使用什么好的网站是caniuse.com
h6:hover
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform : rotate(-90deg);
【讨论】：
【参考方案7】：h6 text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf
#motha2
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ;
h6:hover -webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf
【讨论】：
请解释你做了什么。抛出一段代码几乎没有帮助（即使标记为已接受）。【参考方案8】：您可以在 Chrome 中使用它：Chrome test
h6 text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
display: block;
#motha2
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ;
#motha2:hover -webkit-transform:rotate(-90deg);
对于其他浏览器：http://davidwalsh.name/css-transform-rotate
更流畅....Test in Chrome
#motha2:hover
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
@-webkit-keyframes rotate
from -webkit-transform: rotate(0deg);
to -webkit-transform: rotate(90deg);
【讨论】：
添加了如何使移动更流畅。【参考方案9】：我确实在按钮上试过了，应该也可以在图像上工作。这就是你所需要的。 注意：这段代码只是使用 CSS 和 HTML 来制作你想要的。
input#round
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#05B7FF;
border:1px solid #05B7FF; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*initial spin*/
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
display:inline-block;
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round:hover
background:#007DC5;
border:1px solid #007DC5;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
它还有其他几个漂亮的功能，比如推送效果。值得一试。亲切。
注意：您可以编辑过渡持续时间，然后再编辑另一个动画。由您调用。
【讨论】：
以上是关于用css悬停旋转圆圈[重复]的主要内容，如果未能解决你的问题，请参考以下文章