跨弧的CSS动画[重复]
Posted
技术标签:
【中文标题】跨弧的CSS动画[重复]【英文标题】:Css animation across an Arc [duplicate] 【发布时间】:2013-09-25 14:07:15 【问题描述】:当前的 CSS3 是否可以沿 this 弧线为对象 (DIV) 设置动画?
【问题讨论】:
【参考方案1】:我已经分叉了(非常好的)@ArunBertil“支点”解决方案,将其转换为CSS3 Animation
:
Running Demo
CSS
@keyframes drawArc1
0% transform: rotate(180deg);
100% transform: rotate(0deg);
@keyframes drawArc2
0% transform: rotate(-180deg);
100% transform: rotate(0deg);
body
padding: 150px;
background: black;
.wrapper
width: 300px;
animation: drawArc1 3s linear infinite;
.inner
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
<div class="wrapper">
<div class="inner"></div>
</div>
在 FireFox 上观看...要在其他浏览器上运行,只需添加前缀(@-webkit-keyframes
等)
【讨论】:
【参考方案2】:检查一下
http://dabblet.com/gist/1615901
.wrapper
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
.inner
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
html:hover .wrapper
transform: rotate(180deg);
html:hover .inner
transform: rotate(-180deg);
【讨论】:
好的,但我的意思是动画它必须是无限的,我该如何使用它?这是我的尝试jsfiddle.net/J9xgQ 我喜欢支点方式,+1【参考方案3】:嗯,在 Arun 的工作的基础上继续 Andrea 的工作......
简化为仅使用 1 个 div 和 1 个动画:
@keyframes drawArc
0% transform: rotate(0deg) translateX(150px) rotate(0deg) ;
100% transform: rotate(-180deg) translateX(150px) rotate(180deg);
@-webkit-keyframes drawArc
0% -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;
100% -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg);
body
padding: 150px;
background: black;
.test
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
demo
还在 div 中添加了文本以显示它不旋转
【讨论】:
+1,P2P接听!! :)以上是关于跨弧的CSS动画[重复]的主要内容,如果未能解决你的问题,请参考以下文章