CSS揭秘之沿着环形路径运动的动画

《CSS揭秘》里面发现一个很独特的一个动画,使用纯css3动画让一个元素沿着环形路径运动。听起来有点不可思议,本文将带你一起走进作者的文章中,由复杂到简单,由多个结构到简单结构解剖CSS3语句实现环形运动。

具体动画样式演示:链接内容

其它辅助的CSS代码可以查阅一下演示代码源码。这里就不再写出了。

自身绕圆旋转

首先作者给出了一副头像图片沿着环形路径运动,需求是希望头像顺着头像顺着一个大圆以转圈的方式移动。关键代码如下:

<div class="box box2"><div class="ball">Ball</div></div>
@keyframes spin{
    to{transform: rotate(1turn);}
}
.box2 .ball{
    animation:spin 3s infinite linear;
    transform-origin: 50% 150px;
}

绕圆旋转,内容不转

可以看到图1在球的中心点转圈,而图2则是绕着150px的半径在转圈的同时,自身也在旋转。效果看起来挺好,但有一个缺陷,就是自身也在转动,使得文字颠倒,无法看清,有没有办法做到只是沿着环形进行运动,同时自己保持原来的朝向呢?

需要两个元素的解决方法

作者想到了之前的一个案例“平行四边形”或者“菱形图片”中提到的“嵌套的两层变形会相互抵消”,这样就想到了用内层的变形来抵消外层的变形效果。


                
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值