码迷,mamicode.com
首页 > 其他好文 > 详细

解决在圆形内做动画而不超出圆外的解决办法

时间:2014-10-27 19:17:35      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   ar   for   sp   

注意:此次动画的目的是在圆内做动画,而动画效果不会超出圆的范围外

在制作这个效果的时候,我一开始想到的就是以下的做法:


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>

 

结果出现以下这样的情况:

bubuko.com,布布扣


解决办法是在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;}

添加了遮罩;

最终效果:

bubuko.com,布布扣 现在文字在圈圈范围内做动画 并且不超出圆的范围了~是不是觉得很简单了~

解决在圆形内做动画而不超出圆外的解决办法

标签:style   blog   http   io   color   os   ar   for   sp   

原文地址:http://www.cnblogs.com/tingting4133/p/4054790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!