-
2021-05-29 18:00:48
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding:0; margin:0; } #box{ width:375px; /* 宽度是图片的宽度 */ height:500px; /* 图片的高度 */ margin:50px auto 0; overflow: hidden; /* 将图片隐藏 */ } ul{ width:4000px; animation: changeImg 6s ease-in-out infinite; /* 调用动画 */ } ul li{ float:left; list-style:none; } /* 定义动画 */ @keyframes changeImg{ 0%{ transform:translateX(0); } 30%{ transform:translateX(0); } 33%{ transform:translateX(-375px); } 63%{ transform:translateX(-375px); } 65%{ transform:translateX(-750px); /* 两张图片的宽度 */ } 95%{ transform:translateX(-750px); } 100%{ transform:translateX(-1225px); /*三张图片的宽度 最后一张图片和第一张图片一样出现 */ } } </style> </head> <body> <div id="box"> <ul> <li><img src="images/z1.gif" alt=""></li> <li><img src="images/z2.gif" alt=""></li> <li><img src="images/z3.gif" alt=""></li> <li><img src="images/z1.gif" alt=""></li> </ul> </div> </body> </html>需要注意的是实现轮播图的图片像素大小需要一致不然效果不好，可以使用ps或者pr来剪辑图片
代码是本人亲自敲打，可以直接复制粘贴使用。
更多相关内容 -
Android代码-Keyframes
2019-08-07 02:59:55Keyframes Keyframes is a combination of (1) an ExtendScript script that extracts image animation data from an After Effects file and (2) a corresponding rendering library for Android and iOS. ... -
CSS3 中的@keyframes介绍
2020-09-25 02:10:14CSS3新增动画属性“@keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。 -
CSS3中的@keyframes关键帧动画的选择器绑定
2020-09-24 22:10:56@keyframes可以帮助我们进行类似Flash中的关键帧动画制作,这里我们来简单讨论一下CSS3中的@keyframes关键帧动画的选择器绑定,需要的朋友可以参考下 -
animate-me.less:Keyframes & animation LESS mixin
2021-05-29 19:40:04Animate me 或多或少可帮助您生成跨浏览器且完全有效的@keyframes 和动画的 css 代码，无需黑客。 为什么？ 我通常更喜欢 SCSS，但因为 wordpress（ ， ）更好地支持并且我想简化以重新创建我虽然这样做，对我来说... -
@keyframes规则实现多重背景的CSS动画
2020-09-24 23:47:59主要介绍了@keyframes规则实现多重背景的CSS动画,代码中使用的是效果图中显示的素材,仅作为脚本示例在此便不提供下载了,需要的朋友可以参考下 -
@keyframes
2021-06-14 01:47:10@keyframes版本：CSS3关键帧@keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。示例@...展开全文@keyframes
版本：CSS3
关键帧@keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。
示例@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
JavaScript 可以通过 CSS对象模型接口CSSKeyframesRule来访问@keyframes
要使用关键帧，先创建一个带名称的@keyframes规则，以便后续使用@keyframes规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
您可以按任意顺序列出关键帧百分比；他们将按照其应该发生的顺序来处理。
让关键帧序列生效
如果一个关键帧规则没有指定动画的开始或结束状态(也就是，0%/from和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。
如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。
重复定义(Duplicate resolution)
如果多个关键帧使用同一个名称，以最后一次定义的为准。@keyframes不存在层叠样式(cascade)的情况，所以动画在一个时刻(阶段)只会使用一个的关键帧的数据。
如果一个@keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准。因为@keyframes的规则不存在层叠样式(cascade)的情况，即使多个关键帧设置相同的百分值也不会全部执行。
属性个数不定
如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值(不能使用插值的属性除外，这些属性会被忽略掉)。例如：@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
例子中，"top"属性分别出现在0%,30%和100%的关键帧中，"left"属性分别出现在0%,68%和100%关键帧中.
当关键帧被重复定义
如果某一个关键帧出现了重复的定义，且重复的关键帧中的css属性值不同，以最后一次定义的属性为准。例如：@keyframes identifier {
0% { top: 0; left: 0px}
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; left: 30px;}
}
上面这个例子中，50%关键帧中设置的属性top: 10px是有效的，但是其他的属性会被忽略
层叠样式(cascade)的特性从Firefox 14版本开始可以使用了。拿上面的例子来说，对于50%关键帧，left: 20px这个值不会被忽略掉。目前这种特性还没写入规范，但是已经在探讨中了。
关键帧中的!important 关键词
关键帧中出现的!important 关键词将会被忽略@keyframes important1 {
from { margin-top: 50px; }
50% { margin-top: 150px !important; }
/* 忽略 */
to { margin-top: 100px; }
}
@keyframes important2 {
from { margin-top: 50px;
margin-bottom: 100px; }
to { margin-top: 150px !important; /* 忽略 */
margin-bottom: 50px; }
}
浏览器支持
IE10以上版本的浏览器都支持@keyframes
语法@keyframes{from| to| }
取值：帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
from：等价于 0%。
to：等价于 100%。
：动画序列中触发关键帧的时间点，使用百分值来表示。
实例
@keyframes指定动画名称和动画效果。通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。@keyframes slidein {
from {
margin-left:100%;
width:300%;
}
to {
margin-left:0%;
width:100%;
}
}@keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }
其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。
如果复杂的动画，可以混合去设置某个时间段内的任意时间点的样式：@keyframes testanimations {
from { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20); }
80% { transform: translate(80px, 0); }
to { transform: translate(100px, 20px); }
}
当然，也可以不使用关键字from和to，而都使用：@keyframes testanimations{
0% { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20px); }
80% { transform: translate(80px, 0); }
100% { transform: translate(100px, 20px); }
}
注意，这里的0%不能简写成0，0是非标准语法(虽然被某些浏览器所支持)。
-
vue中的动态keyframes参数
2021-09-28 16:04:07现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图（主要涉及到动画效果,中间部分左右两边不说）： ### 主要思路 使用animation配合@keyframes来使用上下移动动画 **...展开全文最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图（主要涉及到动画效果,中间部分左右两边不说）：
主要思路
使用animation配合@keyframes来使用上下移动动画
问题1：如何将不同柱子的top值传递给@keyframes中?用 document.styleSheets[0].insertRule
在请求后端成功后进行的操作:
document.styleSheets[0].insertRule( "@keyframes tbMove" + index + "" + "{" + "0%{top: " + topValue + "px;}" + "50%{top: " + (topValue + 15) + "px;}" + "100%{top: " + topValue + "px;}" + "}" ) document.styleSheets[0].insertRule(".tbmovestyle" + index + "{" + "animation: tbMove"+index+" 4s infinite;" + "}" )以上代码相当于在页面中插入了 .tbmovestyle 和 @keyframes tbMove + index 样式.可以通过以下代码查看页面样式
console.log("document", document.styleSheets[0])随后在使用的地方动态绑定即可,参考例子:
<div v-for="(item,index) in centerMsg" :style="{'left':item.LEFT,'top':item.TOP}" :class="{ 'tbmovestyle0':index==0, 'tbmovestyle1':index==1, 'tbmovestyle2':index==2, 'tbmovestyle3':index==3, 'tbmovestyle4':index==4, 'tbmovestyle5':index==5, 'tbmovestyle6':index==6, 'tbmovestyle7':index==7, 'tbmovestyle8':index==8, 'tbmovestyle9':index==9, 'tbmovestyle10':index==10, 'tbmovestyle11':index==11, }"></div>以上就是我对Vue中@keyframes动态参数的认识,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。
-
Keyframes:一个简单CSS工具箱
2021-04-14 12:23:58字符代码：搜索特殊字符并获取其HTML或CSS代码。项目安装与开发配套npm installNPM命令服务于 npm run serve量产npm run build运行测试npm run test整理和修复文件npm run lint要设置的其他内容应用程式版本更新该... -
LIO-SAM代码（中文注释）
2022-02-24 14:13:14LIO-SAM代码中文注释 ROS代码 -
keyframes介绍与调用动画方法
2022-03-05 16:47:56在一个“@keyframes”中的样式规则可以由多个百分比构成的， 如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式， 从而达到一种在不断变化的效果。 02调用动画 ...展开全文keyframes介绍
@keyframes changecolor{ 0%{ background: red; } 50%{ background: red; } 100%{ background: green; } }在一个“@keyframes”中的样式规则可以由多个百分比构成的，
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，
从而达到一种在不断变化的效果。
02调用动画
调用动画 animation-name属性主要是用来调用 @keyframes 定义好的动画。 需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写）， 如果不一致将不具有任何动画效果。 属性值： none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。 “@keyframes”定义的动画名称。 eg：
视图页面代码 <body> <div><span></span></div> </body> 外链CSS的代码 @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } @keyframes around { 0%{ transform:translateX(0); } 25% { transform: translateX(180px); } 50% { transform: translate(180px, 180px); } 75% { transform:translate(0, 180px); } 100% { transform: translateY(0); } } div { width: 200px; height: 200px; border: 2px solid #C0F; margin: 100px auto; } div span { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #93C; animation-name:around; animation-duration:0.5s; animation-timing-function:ease; animation-delay:.3s; animation-iteration-count:5; }效果图：显示的页面为：
当我们进去页面（开启页面或者刷新页面）时，图中的小紫圆点就会围绕紫色的框顺时针旋转几圈，用时0.3S 。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1UxY1IKe-1646470051758)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220301110533922.png)]](https://img-blog.csdnimg.cn/4bd98ce0276c48519db653784d946569.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU3NzI3MDI3,size_7,color_FFFFFF,t_70,g_se,x_16)
03 ----animation-duration设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，
是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
@charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } @keyframes toradius{ from { border-radius: 0; } to { border-radius: 50%; } } div { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; animation-name:toradius; animation-duration:2s; animation-timing-function:linear; animation-delay:.5s; animation-iteration-count:infinite; } div:hover{ animation-play-state:paused; }效果图：从一个正方形变化成一个圆形。变化时间太短，截屏跟不上。
animation-timing-function设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。
主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。
ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。
ease-in:动画开始的速度较慢，然后速度加快。
ease-out:动画开始的速度很快，然后速度减慢。
ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.
HTML代码： <body> <div><span></span></div> </body> CSS外链的代码： @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } @keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div{ width:500px; height:200px; border:2px solid #903; margin:100px auto; } div span{ display:inline-block; width:20px; height:20px; background:#C0F; border-radius: 100%; animation-name:move; animation-duration:10s; animation-timing-function:ease-out; }效果图：刚开始的视图 图片
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkuekxDW-1646470051760)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153221603.png)]](https://img-blog.csdnimg.cn/87d80b5ff895449cb5fc3969c5aa4c44.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU3NzI3MDI3,size_14,color_FFFFFF,t_70,g_se,x_16)
动画效果图，当刷新之后，紫色的点的运行路径。播放次数是一次。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqjlAucx-1646470051760)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153406942.png)]](https://img-blog.csdnimg.cn/6f6664dfeda344c09e56f5b076ca9c13.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU3NzI3MDI3,size_14,color_FFFFFF,t_70,g_se,x_16)
animation-iteration-count动画的播放次数
animation-iteration-count属性主要用来定义动画的播放次数。
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，
这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。
HTML代码： <body> <div><span></span></div> </body> CSS外链的代码： @charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } @keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div{ width:500px; height:200px; border:2px solid #903; margin:100px auto; } div span{ display:inline-block; width:20px; height:20px; background:#C0F; border-radius: 100%; animation-name:move; animation-duration:10s; animation-timing-function:ease-out; animation-iteration-count:infinite; /*animation:move 10s ease-in infinite;*/ }效果图：刚开始的视图 图片
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jL9q66QY-1646470051760)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153221603.png)]](https://img-blog.csdnimg.cn/e230690f7607400894a75d2b4f79491c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU3NzI3MDI3,size_14,color_FFFFFF,t_70,g_se,x_16)
动画效果图，当刷新之后，紫色的点的运行路径。紫色的点会一直沿着这条路径不停的运行。播放次数是多次。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9BjgKBGE-1646470051761)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220302153406942.png)]](https://img-blog.csdnimg.cn/559fbbbcdec64f9abe1d68341c6ba1af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzU3NzI3MDI3,size_14,color_FFFFFF,t_70,g_se,x_16)
-
css3 keyframes日全食动画特效
2021-04-25 05:10:53css3 keyframes日全食动画特效是一款基于css3 keyframes属性绘制的太阳被月亮遮住日食动画特效。 -
Vue中动态修改keyframes动画特效
2021-05-20 17:07:18操作 主要使用的是document.styleSheets[0] ...下面是演示代码： <template> <div> <div class="toupiao" v-if="showTest"> <div class="yes btns" @click="changes('1')">赞同< -
VS 2015中直接使用@keyframes的问题 报错问题 解决方案
2019-10-29 12:05:11@keyframes shake-data-v-e732b878 { 0% { -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotate(0deg); ... -
Keyframes-crx插件
2021-04-01 20:20:36语言:English 浏览器内CSS动画创建者。 关键帧是非常简单且极其有用的工具，可用于直接在浏览器中创建CSS动画，而无需在浏览器和编辑器之间切换。...完成后，您将获得可用的代码以添加到您的项目中。 -
Egocentric-Visual-Keyframes-Summary
2021-05-31 15:10:51Egocentric_Visual_Keyframes_Summary 此代码提取了由 Narrative Clip 或 SenseCam 捕获的一组以自我为中心的图像的视觉摘要。 结果是一幅拼贴画，其中一张图像总结了图像集的每个事件。 如果您使用此代码，请引用... -
CSS动画：keyframes用法介绍
2021-06-13 06:26:39在CSS动画中，使用Transition技术是一种“隐式”的动画方法，而相对应的，还有一种“显式”的动画技术，就是，你可以在CSS里直接指定动画效果，这需要使用keyframes属性了。演示：秋叶飘落动画上面这个”秋叶飘落... -
css进行中打点效果的演示代码
2020-09-24 19:37:53主要介绍了css进行中打点效果，附上代码让大家更简单易懂得看明白样式设置，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。 -
CSS动画属性关键帧keyframes全解析
2021-06-12 18:57:58这篇文章本来是写的《SVG+CSS动画》小册中的一个小节选，小册因为各种莫名的原因，搁浅了，搁浅……起航时间遥遥无期，但keyframes关键帧作为控制动画在不同时间的状态的重要元素，决定了七十二变的终极形态，所以... -
详解CSS3中的@keyframes关键帧动画的选择器绑定
2021-08-05 04:59:30在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称语法@keyframes animationname {keyframes-selector {css-... -
css3动画 @keyframes
2022-02-26 22:19:25@keyframes 指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 注意：@keyframes 规则不兼容 IE 9 以及更早版本的浏览器. 语法：@keyframes animationname {keyframes-selector {css-styles;} 值 ... -
css 动画 keyframes
2020-08-14 21:03:33动画是CSS3中最具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果. 相比较过渡效果,动画可以实现更多变化,更多控制, 连续播放等效果. 动画的基本使用: 步骤分为两步: 1.... -
css动画之@keyframes
2021-11-29 00:38:071 前言在css中我们可以利用@keyframes创建动画效果，在过程中还可更改css样式。2 方法先在position进行定位，animation设置动画运行的时长，infinite表示... -
关于@keyframes定义动画的问题_html/css_WEB-ITnose
2021-06-14 04:48:44(代码不考虑兼容性)运行的时候不是按我想的步骤来的，而是：转30度和向右走同时进行，转330度和往回走同时进行。请问为什么？怎么写正确的代码完成我的要求？回复讨论(解决方案)@keyframes donghua{0% {width:120px;... -
keyframes + animation没有效果
2021-06-14 04:48:47@-webkit-keyframes change{0%{ transform:rotate(0deg);}10%{ transform:rotate(3deg);}20%{ transform:rotate(-3deg);}30%{ transform:rotate(2deg);}40%{ transform:rotate(-2deg);}50%{ transform:rotate(1deg);... -
css动态特效 @keyframes
2021-10-27 20:32:17在css选择器中引用三.参数解释animation（调用动画以及参数的解释，与-webkit-animation通用）duration（动画执行的时间）timing-function（动画执行的速度）delay（动画延迟多久开始）iteration-count（动画执行的... -
css3 动画animation 及@keyframes 规则
2021-04-15 11:29:32@keyframes 规则 //宽度从100px 变成 200px // boxW 为 方法名 @keyframes boxW { from {width:100px;} to {width:200px;} } //或 //from（与 0% 相同）； to（与 100% 相同） @keyframes boxW { 0% {width:... -
CSS3 动画关键帧 @keyframes
2018-02-23 22:07:36动画在CSS3中，通过 animation 属性来定义动画。虽然 transition 也可以实现从一种状态到另一种状态的动画效果，但它只能控制...CSS3中，animation 实现的动画由两个部分组成：首先，使用关键帧 @keyframes 来声明...
