动漫

轮播图CSS

独自空忆成欢 提交于 2019-12-02 15:22:23
css3中的animation:动画名 持续时间 动画的速度曲线 动画开始之前的延迟 动画播放的次数 是否应该轮流反向播放动画 动画播放次数:n(定义应该播放多少次动画) ; infinite(无限循环) 动画延迟:ns (默认为零) 是否反向播放: normal alterna 动画的速度曲线; linear (匀速);ease(默认 先快然后加速,最后变慢);ease-in(以低速开始);ease-out(以低速结束);ease-in-out(动画一低速开始和结束) cubic-bezier(n,n,n,n) @keyframes(用来改变动画轨迹或者效果)和animate 1需要创建一个名字,后面绑定动画时需要 2.from 起始时0% 3 to到达终点时等同于100% box-sizing属性:content-box(border和padding值不计算在width之内);padding-box(padding计算在width之内);border-box(border和padding计算在width之内) content属性: a:after { content: " (" attr(href) ")"; } HTML: <!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>轮播图</title> <link

css3常用动画+动画库

心不动则不痛 提交于 2019-12-02 06:43:53
css3常用动画+动画库 一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演示: https://daneden.github.io/animate.css/ github地址: https://github.com/daneden/animate.css 二、magic.css动画库 查看演示: http://www.17sucai.com/pins/demoshow/10001 github地址: https://github.com/miniMAC/magic 三、Effect.css 针对不同UI的CSS3动画和过渡效果集,包含了丰富的CSS3动画和过渡效果,包括: Modal overlay button list listscroll Caption 等等 查看演示: http://www.gbtags.com/gb/linkviewer/3147.htm 四、hover.css Hover.css是一套使用CSS3动画实现的Hover特效集锦,包含了: 2D变形 边框过渡效果 阴影过渡效果 页脚翻转效果 查看演示: http:/

心跳动画

末鹿安然 提交于 2019-12-02 05:27:39
心跳动画 思路: 1.首先要设置出心形 心形可以由左右两颗半心组成,通过设置border-radius和旋转以达到心形效果。 2.让心形动起来 代码: 定义基础类 .cq_animation { /* 默认执行所有动画名字 */ animation : all ; /* 默认每个动画执行时间 */ animation-duration : 2s ; /* 默认所有动均匀速执行 */ animation-timing-function : linear ; } /* 始终是否循环执行 */ .infinite { animation-iteration-count : infinite ; } 通过伪元素设置设置两颗版心 #heart { position : relative ; width : 100px ; height : 90px ; } #heart::before, #heart::after { position : absolute ; content : "" ; left : 50px ; top : 0 ; width : 50px ; height : 80px ; background : red ; border-radius : 50px 50px 0 0 ; //上右圆角设置为50% transform : rotate ( -45deg ) ; /

unity之龙骨动画

a 夏天 提交于 2019-12-02 03:13:52
推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 我的个人博客 做游戏有史以来,第一次接触到龙骨动画,为新人引个路吧。 (1)首先拿到美术给我三个文件,分别是name_ske.json,name_tex.json和name_tex (2)在unity中创建一个文件夹,命名为shirln,放入(1)中的三个文件 (3)选中(2)中的三个文件,鼠标右键选择“create——>DragonBones——>ArmatureObject(UGUI)” (4)这时在Hierarchy面板会生成一个名为Armature的游戏物体 (5)修改(4)物体上的UnityArmatureComponent属性如下,并保存为预置放在shirln文件中 (6)代码中使用 a.实例化 b.取UnityArmatureComponent组件 c.Arma.animation:Play("newAnimation", 0)播放(0代表循环) 注意:龙骨动画一定要保存为预置,需要的时候动态加载,不然当多个地方同时使用一个龙骨动画时会出现同一龙骨动画只有一个龙骨动画播放这种情况 来源: https://www.cnblogs.com/shirln/p/11728232.html

css 动画animation基本属性(干货)

╄→尐↘猪︶ㄣ 提交于 2019-12-02 02:56:56
1 /* 动画名称 */ 2 animation-name: cloud; 3 /* 属性定义动画完成一个周期所需要的时间,以秒或毫秒计 */ 4 animation-duration:1s; 5 /* 属性定义动画何时开始 */ 6 animation-delay: 0s; 7 /* 规定动画的速度曲线 */ 8 animation-timing-function: linear; 9 /* 播放次数 n|无限循环 */ 10 animation-iteration-count: infinite; 11 /* 动画结束后保持最后动作 */ 12 animation-fill-mode: forwards; 13 /* 属性定义是否应该轮流反向播放动画 */ 14 animation-direction:normal; 15 /* 属性规定动画在播放之前或之后,其动画效果是否可见 */ 16 animation-fill-mode: none; 17 /* 属性规定动画正在运行还是暂停 */ 18 animation-play-state: running; 来源: https://www.cnblogs.com/sunshouguo/p/11727446.html

jq处理动画累加

此生再无相见时 提交于 2019-12-02 02:41:07
问题:日程提醒(跟日历一样的切换效果),只用一个div来展示当天日程数据,每次清空div里的数据再加载数据,导致切换日期时,数据展示div有闪动,于是采用动画来进行过渡,这样就巧妙地避免了闪动; $("#siteInfo").hide(function () { $("#siteInfo").empty(); getSite(); }).fadeIn(); 但由于动画有完成时间,导致频繁切换日期的时候出现了动画累积的现象,操作停止后累积的动画仍在继续,这样的用户体验感是很差的,于是想到了stop()方法来停止动画 $("#siteInfo").stop().hide(function () { $("#siteInfo").empty(); getSite(); }).fadeIn(); 看起来不错,但总觉得还差点什么,原来stop()只停止了第一个动画( [ hide() ] ),对于后续的多个动画( [ fadeIn() ] ... )就无能为力了; 然后看了一下stop()的语法: $("element").stop([clearQueue][,gotoEnd]);   clearQueue:bool,代表是否要清空未执行的动画队列   gotoEnd:bool,有前一个参数才有此参数,代表将正在执行的动画直接跳到末状态 试试一个参数   stop(true)

iIOS之动画停止

孤街浪徒 提交于 2019-12-01 23:00:29
- (void)rotateView { CABasicAnimation *rotationAnimation; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI_4]; rotationAnimation.duration = 0.3; rotationAnimation.removedOnCompletion = NO; rotationAnimation.fillMode = kCAFillModeForwards; [self.workItem.icomImgView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"]; } removedOnCompletion 动画完毕是否移除,默认是YES; fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后 kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态

jquery判断元素动画状态animate

一世执手 提交于 2019-12-01 09:50:47
用animate写动画效果的时候,经常会遇到一个问题——往往在元素动画还没结束又开始执行下一个动画,这样会造成动画重叠,为了解决这个为题,需要对元素处于的状态进行判断,这就需要用到$(document).is(":animated")来进行判定: if($(document).is(":animated")){ //判断元素是否正处于动画状态 }else{ //这里写新的动画 }    来源: https://www.cnblogs.com/xxySsm/p/11676614.html