跨弧的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;

html

<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动画[重复]的主要内容,如果未能解决你的问题,请参考以下文章

animate.css:重复动画

延迟按钮动画CSS [重复]

使用jQuery检测animate.css的动画状态和动画状态结束[重复]

在页面加载时启动 CSS 动画 [重复]

带有渐变的CSS3动画[重复]

使用animate.css [编辑]在第一个动画后重复相同的动画6s