整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前端开发来说，通过动画来提升交互效果是很常见的。在很早以前，做web动画主要通过javascript或者jquery或者flash这样的手段，非常麻烦，自打有了ccs3，做动画就太方便了，只需几行css代码就可以搞定。
这里我们就演示一个常见的循环滚动效果，任务是这样：先准备一个图片，平铺到页面上充满整个屏幕，然后就让画面一直向上循环滚动，形成无边无际的感觉。
虽然可以从网上搜到一些类似的代码，但是鱼龙混杂，无关紧要的代码非常多，不够纯粹。如果要弄明白动画的原理，只有自己动手做一遍才能真正消化吃透。所以我们来一步步原创这个代码，排除所有不必要的基础样式，只说要点，3个步骤你就可以完全掌握其精髓！
第一步：布局
首先，滚动的图片需要放在一个容器里，一行html代码即可完成：
第二步：把图片放进容器
css中body的边界设为0，把容器设高度100%以充满屏幕，再调用背景图pic.png
第三部：让画面动起来
咱不做标题党，循环滚动靠的就是3行css动起来的。
先是1行 -webkit-animation属性：4个参数分别表示：动画名称scroll，1秒时长，移动速度为线性的，无限循环。
然后是对应的关键帧 @-webkit-keyframes 属性，这是自己定义的动画规则，只需写2行规则即可：
原理：动画就是画从一个地方动到另一个地方。对普通滚动效果来说，有起点和终点这两个节点的位置就够了。所以我们用0%和100%分别表示起点和终点，指定2个背景图的xy位置坐标即可。图片会在规定时间内从起点移动到终点，并循环下去，数值是负表示是向上移动。320px正好是图片的高度，这样循环的时候是无缝衔接的。
好了，最终完整的代码如下，是不是很精练呢？保存成 index.html 即可
代码写完了，还要记得在当前目录要有pic.png这个图片哦，我随便画了几笔，绝无观赏性，建议自己找个好看点的图片来代替。
现在用浏览器打开index.html即可看到效果，比较魔性的地方在于，如果你盯着看久了，关闭窗口以后会出现幻觉，仿佛整个显示器都在向上飞，哈哈！
最后我们来说说浏览器兼容性问题：
大家可能注意到了，前面那2个古怪的 -webkit-animation, @-webkit-keyframes 这里的-webkit-其实是一个前缀，animation和@keyframes才是CSS的标准属性。
当加上-webkit-后，就形成了一个针对特殊浏览器的专有属性，表示用在谷歌的chrome和苹果的safari浏览器上。此外还有-moz前缀代表针对firefox浏览器的私有属性。
所以我们在用到css3的一些特性的时候，经常使用一大堆的重复性的代码，比如我们今天的这个代码，有人会写成这个样子：
一个简单的动画就要写这么多冗余的代码，为的只是支持一些旧的浏览器，有必要吗？为什么在这个例子中我们仅仅采用了-webkit-而没有使用其它专有属性呢？
因为现在已经是2019年了！谷歌苹果的浏览器是主流，占据了绝大部分，而其它小众浏览器也大多能够兼容他们，在版本上，大部分人安装浏览器是直接下载新版本安装使用，而非找出家里陈年的老软盘、老光盘去安装，家中的老电脑也早已升级不知多少回了，所以也几乎没有机会使用低版本的浏览器了！
至于微软的IE，就更别提了，IE9以前不支持动画的，只能用js或者jquery来写动画，直到IE10才支持css动画，随后IE被放弃，主推Edge，搞了几天越来越头大干脆也放弃，现在直接使用chrome内核了，所以针对ie的兼容性除非有特殊要求已经无需考虑。
你在网上能看到的范例代码，如果有写成那么复杂臃肿的，估计也都是3-5年前发的老文，或者抄来抄去不做思考的搬砖工留下的“初学者”笔记。
我们不仿测试一下几款主流浏览器的情况看看，结论：
测试结果表明，-webkit-的写法在4款不同内核的浏览器上都能正常使用，所以我们的代码因此能得以简化。
当然，这个例子也有局限性，比如你看，只有苹果safari不支持标准写法，万一将来他改邪归正了呢？毕竟标准写法才是众望所归不是？使用针对个别浏览器的私有属性写法，虽可用但毕竟有些怪怪的，将来怎么样还很难说呢。这样看来，如果使用古老的处理办法，重复N次为每个专属浏览器各写一份代码，除了辣眼睛也真没什么错。
浏览器的兼容问题涉及面实在是非常广，三言两语还真说不完，以后会专门来讲。
加载动画效果演示
HTML代码
<div class="infinity-1"></div>
<div class="infinity-2"></div>
<div class="infinity-3"></div>
<div class="infinity-4"></div>
<div class="infinity-5"></div>
<div class="infinity-6"></div>
<div class="infinity-7"></div>
<div class="infinity-8"></div>
<div class="infinity-9"></div>
<div class="infinity-10"></div>
CSS代码
.infinity-1 {
width:90px;
height:14px;
background: repeating-linear-gradient(90deg, currentColor 0 calc(25% - 5px),#0000 0 25%) left/calc(4*100%/3) 100%;
animation:i1 0.5s infinite linear;
}
@keyframes i1 {
100% {background-position: right}
}
.infinity-2 {
width:90px;
height:14px;
background: radial-gradient(circle closest-side, currentColor 92%,#0000 ) calc(100%/3) 0/calc(100%/4) 100%;
animation:i2 0.5s infinite linear;
}
@keyframes i2 {
100% {background-position: 0 0}
}
.infinity-3 {
width:calc(80px / 0.707); /* 0.707 = cos(45deg) */
height:14px;
background: repeating-linear-gradient(-45deg, currentColor 0 15px,#0000 0 20px) left/200% 100%;
animation:i3 2s infinite linear;
}
@keyframes i3 {
100% {background-position:right}
}
.infinity-4 {
width:calc(80px / 0.707);
height:14px;
background:
repeating-linear-gradient(135deg, currentColor 0 15px,#0000 0 20px) left top,
repeating-linear-gradient( 45deg, currentColor 0 15px,#0000 0 20px) left bottom;
background-size: 200% 50%;
background-repeat: no-repeat;
animation:i4 2s infinite linear;
}
@keyframes i4 {
100% {background-position:top right,bottom right}
}
.infinity-5 {
width:90px;
height:14px;
background:
radial-gradient(circle 10px at right 7px top 50%,#0000 92%,currentColor),
radial-gradient(circle 10px at right 0 top 50%,currentColor 92%,#0000);
background-size: calc(100%/3) 100%;
background-position: 50% 0%;
animation:i5 .5s infinite linear;
}
@keyframes i5 {
100% {background-position: 0% 0%}
}
.infinity-6 {
width:90px;
height:14px;
background:
conic-gradient(from 45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
conic-gradient(from -135deg at 7px 50%,currentColor 90deg,#0000 0);
background-position: calc(100%/3) 0;
background-size:calc(100%/4) 100%;
animation:i6 0.5s infinite linear;
}
@keyframes i6 {
100% {background-position: 0 0}
}
.infinity-7 {
width:90px;
height:14px;
background:
linear-gradient(90deg,currentColor 50%,#0000 0) repeat-x,
conic-gradient(from 45deg at right 7px top 50%,currentColor 90deg,#0000 0);
background-position: calc(100%/3) 50%;
background-size:calc(100%/4) 60%,calc(100%/4) 100%;
animation:i7 0.5s infinite linear;
}
@keyframes i7 {
100% {background-position: 0 50%}
}
.infinity-8 {
width:90px;
height:12px;
background:
linear-gradient(90deg ,currentColor 50%,#0000 0) 0 0%,
linear-gradient(-90deg,currentColor 50%,#0000 0) 0 50%,
linear-gradient(90deg ,currentColor 50%,#0000 0) 0 100%;
background-size: 8px calc(100%/3);
background-repeat: repeat-x;
animation:i8 .25s infinite linear;
}
@keyframes i8 {
100% {background-position: -8px 0%,-8px 50%,-8px 100%}
}
.infinity-9 {
width:90px;
height:14px;
background:
linear-gradient(90deg,#0000 16px, currentColor 0 30px, #0000 0),
radial-gradient(circle closest-side at 68% 50%, currentColor 92%,#0000),
conic-gradient(from 45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
conic-gradient(from -135deg at 7px 50%,currentColor 90deg,#0000 0);
background-position: 0 0;
background-size:calc(3*100%/4) 100%;
background-repeat: repeat-x;
animation:i9 2s infinite linear;
}
@keyframes i9 {
100% {background-position: -300% 0}
}
.infinity-10 {
width:90px;
height:12px;
background:
linear-gradient( 90deg,currentColor 50%,#0000 0) 0 0%,
linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0%;
background-size: 20px 100%;
background-repeat: repeat-x;
animation:i10 1s infinite linear;
}
@keyframes i10 {
100% {background-position: -20px 0%,20px 0%}
}
/**/
body {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-auto-rows: 130px;
place-items:center;
}
div[class]:nth-child(odd) {
color:darkblue;
}
* {
box-sizing: border-box;
}
分享不易，请关注，点赞，评论哦，更多分享哦
SS3动画原理实现轮播图，主要用到CSS3的动画过渡实现切换，感兴趣的小伙伴可以看看！
效果图：
实现代码
html:
css:
*请认真填写需求信息，我们会在24小时内与您取得联系。
