1. 搞机Pro网首页
  2. 科技
  3. 软件

图片无缝滚动代码（图片无缝滚动怎么实现）

小情兽 • • 软件

昨天用js做的图片无缝滚动的效果，朋友们都说CSS3也可以实现，话说自己原来学的都是CSS2，主要用来网页静态布局，还真没想过用CSS3的动画属性。于是乎，花了一天时间在w3school上把关于CSS3动画的知识看了一遍，简单做了个图片滚动的效果，有些简陋，却也发现CSS3的功能果然强大，也有一些浏览器兼容性的问题（不过大家现在用的浏览器应该都能支持，别告诉我你还在用XP，那你真是超级怀旧派了，话说XP的确挺好）

一、关于@keyframes

这个是用来定义动画规则用的，在其中能够定义任意多样式任意多次数的动画规则，可以用百分比来规定变化发生的时间。比如0%，25%，50%，75%，100%，也可以用关键词“from”和“to”，等同于0%和100%。

0%是动画的开始，100%是动画的结束。一般来说，为了得到浏览器更好地支持，我们要始终定义0%和100%。

举个例子，我们在动画开始的时候，定义一个div元素的背景色为红色，动画到一半的时候，定义背景色为蓝色，动画结束的时候，背景色为黄色，怎么写这个动画规则？

@keyframes myfirst

{

0% {background: red;}

50% {background: blue;}

100% {background:yellow;}
}

一般来说，为了更好的适配浏览器，我们还要写几个作用于不同浏览器的规则

1、作用于Firefox浏览器

@-moz-keyframes myfirst

{

0% {background: red;}

50% {background: blue;}

100% {background:yellow;}
}

2、作用于Safari和Chrome浏览器

@-webkit-keyframes myfirst

{

0% {background: red;}

50% {background: blue;}

100% {background:yellow;}
}

3、作用于Opera浏览器

@-o-keyframes myfirst

{

0% {background: red;}

50% {background: blue;}

100% {background:yellow;}
}

二、关于动画属性

1、animation-name:规定动画的名称

2、animation-duration:规定动画完成一个周期的时长

3、animation-timing-function:规定动画的曲线速度

4、animation-delay:规定动画开始的时间

5、animation-iteration-count:规定动画播放的次数

6、animation-direction:规定动画在下个周期是否反向播放

7、animation-play-state:规定动画是否正在运行或暂停

888、animation:简写属性，将上边1—6的属性在一个表达式中体现，可以减少N多工作量。

最重要的一点，动画规则只有捆绑到某个选择器上，动画才生效。意思一看都明白，关键是要多练习实际敲几次代码运行下效果，这里我就不再累赘了。

三、图片滚动效果实战

1、摆上我们用来演示的图片。

<body>

<p>图片无缝滚动</p>

<div >

<ul >

<li>10</li>

<li>9</li>

<li>8</li>

<li>7</li>

<li>6</li>

<li>5</li>

<li>4</li>

<li>3</li>

<li>2</li>

<li>1</li>

</ul>

</div>

</body>

2、加上CSS样式

*{margin:0; padding: 0;}

p{

margin:0 auto;

text-align: center;

font-size:30px;

}

#wrap{

width:610px;

height:130px;

border:1px solid #000;

position: relative;

margin:100px auto;

overflow: hidden;

}

#list{

position: absolute;

left:0;

top:0;

width:200%;

}

#list li{

width:120px;

height:130px;

border:1px solid red;

background: pink;

color:#fff;

text-align: center;

font-size:50px;

float:left;

list-style: none;

}

3、给ul加上动画效果。为了适配不同的浏览器，还要多添加几个animation属性

#list{

position: absolute;

left:0;

top:0;

width:200%;

animation:myfirst 8s linear infinite alternate;

-moz-animation:myfirst 8s linear infinite alternate;

-webkit-animation:myfirst 8s linear infinite alternate;

-o-animation:myfirst 8s linear infinite alternate;

}

好了，大家可以看一看具体效果咯。

四、个人感受

用CSS3实现图片滚动确实很轻松，效果也挺不错。还是最开始我说的，前期我们暂不必纠结到底JS方法好还是CSS3方法好，只要能把要求的效果实现了就行，进步缘于一点一滴的实践与锻炼。

谨以此与大家共勉——一个奋斗在web开发路上的小白

图片无缝滚动代码（图片无缝滚动怎么实现）

您可能感兴趣：

faker大魔王简介（关于faker大魔王的资料介绍）

css使用教程（css实战手册）

分类记忆成语大全（分类记忆成语大全及解释）

CSS是什么（css详解大全）

列出css样式的三种使用方法（css样式总结）

哪款手机摄影效果最好（10大品牌旗舰手机摄影评测对比）

赞 (0)
小情兽小情兽
0

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发表评论

登录后才能评论