首页 > 代码库 > 解决在圆形内做动画而不超出圆外的解决办法
解决在圆形内做动画而不超出圆外的解决办法
注意:此次动画的目的是在圆内做动画,而动画效果不会超出圆的范围外
在制作这个效果的时候,我一开始想到的就是以下的做法:
CSS:.circle{width: 200px;height: 200px;border-radius: 200px;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;}.text{position: absolute;top: 0;left: 0;-webkit-transform:translateX(-200px);}.text.show{ -webkit-animation:text 1.5s infinite forwards; } @-webkit-keyframes text{ 0%{-webkit-transform:translateX(-200px);} 100%{-webkit-transform:translateX(0px);} }
HTML:<div class="circle"> <div class="text">fsd465s4fasf4s65afsdfs654s54fsfs6a</div></div>
结果出现以下这样的情况:
解决办法是在css中的
.circle{width: 200px;height: 200px;border-radius: 200px;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;-webkit-mask-image:url(mask.png);-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;}
添加了遮罩;
最终效果:
现在文字在圈圈范围内做动画 并且不超出圆的范围了~是不是觉得很简单了~
解决在圆形内做动画而不超出圆外的解决办法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。