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

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

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


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;}

添加了遮罩;

最终效果:

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

时间: 2024-11-05 17:22:14

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

让CALayer的shadowPath跟随bounds一起做动画改变-b

在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性可以很方便的为 UIView 添加阴影效果.但是如果单用这几个属性会导致离屏渲染(Offscreen Rendering),而且CoreAnimation在每一帧绘制阴影的时候都需要递归遍历所有sublayer的alpha通道从而精确的计算出阴影的轮廓,这是非常消耗性能的,从而导致了动画的卡顿. 为

经纬度计算是否在圆形内,是否在矩形内,是否在多边形内方法

class 点面关系{static void Main(string[] args){//Vector2D point1 = new Vector2D(39.909209536859834, 116.3225715637207);//inVector2D point1 = new Vector2D(39.901045, 116.415596);//outVector2D cPoint = new Vector2D(39.909209536859834, 116.3225715637207); C

exchange 2010 server内网邮箱突然不能收发外网邮件的问题分析解决办法

环境是,域控+exchange2010server+edge边缘服务器的邮件系统. 故障现象:某个内网邮箱以前可以收发外网邮件,现在突然不能收发外网邮件了. 故障分析:分析最近对服务器做了那些操作. 解决办法:原来是自己更改了设置,没有留意这个内网邮箱用户加了多个通讯组,通讯组有交叉,对这些通讯组设置禁止收发邮件的规则,把这个邮箱也给禁止了,增加了允许这个邮箱的邮件传输规则,故障排除.

使用requestAnimationFrame做动画效果二

3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于在二月底完工了,中间绕了不少弯路,先把domo放出来: 要实行的功能显而易见,一开始我粗糙地不考虑性能,不使用requestAnimationFrame,已经做出来了,但是觉得不好,于是进行了进一步改进.采用对象的方法,先生成10个粉色的小方块,隐藏起来,然后利用requestAnimationFr

A标签触发onclick事件而不跳转的多种解决方法

A标签触发onclick事件而不跳转的多种解决方法 一个标签仅仅是要触发onclick行为,遇到了A标签触发onclick事件时不执行跳转: 在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为: 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果. 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除.因此我们经常会用链接<a></a>形式代替<button> 触发onclick事件. <

popUpWindow 动画无法超出窗体的解决方案

popupWindow 做动画时,当要求有一个放大动画时,动画无法超出窗体,给人的感觉是只有内容在放大,窗体不动. 这是由于窗口大小固定的原因,解决方案是加大popUpwindow的 大小. 一个比较省事儿的方案是,直接把popupwindow窗体设为全屏和透明.这样你就可以任意玩了.这种方案的缺点是 弹窗的位置无法用自带的方法设置. 另外点击窗口外弹窗消失也没法实现了.所以最好的解决方案是,弹窗的大小稍微大于view的大小.

单元格内文本显示超过单元格宽度的解决办法

开发过程中,表格单元格里的显示数据经常超出单元格的宽度.遇到这种情况一般会这样处理. 1.超出部分显示省略号(...) 解决办法:在css中设置  text-overflow: ellipsis; text-overflow: 2.换行显示 解决办法: 在css中设置   white-space:normal; white-space:(1)normal : 默认 .空白会被浏览器忽略. (2) pre : 换行和其他空白字符都将受到保护 (3) nowrap : 强制在同一行内显示所有文本,直

Android 开发中踩过的坑之十一: 避免使用Shader做动画

进来优化内存, 发现5.0的系统上, Shader有个不算bug的小问题, Shader在绘制时, 会copy自身, 如果使用shader做动画, 就会不断的copy自身, 不断的增加使用内存. 大概2k/s的速度上涨 sdk放出的源码中有一个@hide的方法copy(), 怀疑就是它导致内存不断增长, 但是查不到调用. 解决方法也简单, gc一下, 或者避免使用shader来做动画.

百度地图API 判断点是否在圆形内

/** * @fileoverview GeoUtils类提供若干几何算法,用来帮助用户判断点与矩形. * 圆形.多边形线.多边形面的关系,并提供计算折线长度和多边形的面积的公式. * 主入口类是<a href="symbols/BMapLib.GeoUtils.html">GeoUtils</a>, * 基于Baidu Map API 1.2. * * @author Baidu Map Api Group * @version 1.2 */ /** * @n