css3 切换贞动画的效果，仿gif效果

/*---第一组动画---*/.cartonGif_1{position: absolute;display: block;background:url("img/haihangzhuanqu/0-1.png") no-repeat center center/100% 100% ;-webkit-animation-name: charector-1;/* 动画名称 */-webkit-animation-iteration-count: infinite;/* 动画无限播放 */-webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */-webkit-animation-duration: 950ms;/* 动画运行的时间 */}@-webkit-keyframes charector-1{0% {background-position: 0 0;}25% {background:url("img/haihangzhuanqu/0-1.png")  no-repeat center center/100% 100%;}50% {background:url("img/haihangzhuanqu/0-2.png")  no-repeat center center/100% 100%;}75% {background:url("img/haihangzhuanqu/0-3.png")  no-repeat center center/100% 100%;}100% {background:url("img/haihangzhuanqu/0-4.png")  no-repeat center center/100% 100%;}}/*---第二组动画---*/.cartonGif_2{position: absolute;display: block;background:url("img/haihangzhuanqu/1-1.png")  no-repeat center center/100% 100%;-webkit-animation-name: charector-2;/* 动画名称 */-webkit-animation-iteration-count: infinite;/* 动画无限播放 */-webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */-webkit-animation-duration: 950ms;/* 动画运行的时间 */}@-webkit-keyframes charector-2{0% {background-position: 0 0;}25% {background:url("img/haihangzhuanqu/1-1.png")  no-repeat center center/100% 100%;}50% {background:url("img/haihangzhuanqu/1-2.png")  no-repeat center center/100% 100%;}75% {background:url("img/haihangzhuanqu/1-3.png")  no-repeat center center/100% 100%;}100% {background:url("img/haihangzhuanqu/1-4.png")  no-repeat center center/100% 100%;}}

转载于:https://www.cnblogs.com/Kummy/p/4882315.html

css3 切换贞动画的效果，仿gif效果相关推荐

jQuery/CSS3炫酷动画效果插件 animate
jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用, ...
html中如何设置动画效果,css3如何设置动画？
首先我们来了解一下css3实现简单动画需要用到的属性:animation属性,@keyframes"规则". animation属性和@keyframes"规则" ...
android菊花动画,Android实现仿iOS菊花加载圈动画效果
常见的实现方式切图,做旋转动画自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需 ...
Android动画效果 translate、scale、alpha、rotate 切换Activity动画控件位置调整
2011.10.28注:如果需要控件停在动画后的位置,需要设置android:fillAfter属性为true,在set节点中.默认在动画结束后回到动画前位置.设置android:fillAfter后 ...
Tab页面手势滑动切换以及动画效果
. 3张页卡之间的切换.带动画效果. 工程结构. 主要应用到android-support-v4.jar这个jar包. 布局文件. 1.main.xml中的代码 [html] <?xml ver ...
android图片跳转动画效果,Android实现Activity界面切换添加动画特效的方法
本文以实例形式展示了Android实现Activity界面切换添加动画特效的方法,对于Android程序设计人员来说有很好的参考借鉴价值.具体方法如下: 了解Android程序设计的人应该知道,在An ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
react滑动切换tab动画效果_[React Native]react-native-scrollable-tab-view(入门篇)
官方为我们提供的Tab控制器有两种: TabBarIOS,仅适用于IOS平台 ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab) 如果我们需要 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

css3 切换贞动画的效果，仿gif效果

css3 切换贞动画的效果，仿gif效果相关推荐

最新文章

热门文章