css3关键帧动画实现轮播效果

2018-06-24 01:42:47来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式。

思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用css3关键帧动画,可以实现这样的头部效果。

测试:首先,写一个简单的测试来验证思路是否正确,这样可以排除其他样式的干扰;测试如下:

   1.两个嵌套的div,内部div1以简单的文字和图片模拟的搜索栏

 

1 <body>
2     <div class="diva">
3         <div class="div1">头部
4             <img src="../img/放大镜.png">
5         </div>
6     </div>
7 </body>

 

   2.由于动画的主要原理在于改变背景图片的位置,这里先介绍一下background-img,知道的同学自行跳过吧

    由url插入图片

1         div{
2             width: 300px;
3             height: 200px;
4             background: red;
5             background-image: url(../img/放大镜.png);
6         }

    效果:

 

    很明显看到,背景图片的大小不适合div的宽高,所以,用background-size设置图片的宽高

1 background-image: url(../img/放大镜.png);
2 background-size: 20px 30px;

    效果:

    因为背景图默认的设置是重复背景图片,所以更改为禁止重复

1 background-image: url(../img/放大镜.png);
2 background-size: 20px 30px;
3 background-repeat: no-repeat;        /*禁止图片重复*/

    效果:

    这个时候呢,假如想调整图片的位置,就需要设置图片的position

1 background-image: url(../img/放大镜.png);
2 background-size: 20px 30px;
3 background-repeat: no-repeat;        /*禁止图片重复*/
4 background-position: 100px 50px;        /*这里设置的是px坐标,也可以用left或者百分比的形式设置图片位置*/

    效果:

   3.给外部diva设置宽度、背景色和边框,便于观察;给内部div1添加宽高和背景图片,注意这里div1的宽度是背景图片宽度的总和;当然,div1中的图片也要适当调整宽高。

 

 1          .diva{
 2             width: 100%;
 3             background: red;
 4             border: 5px solid blue;
 5         }
 6         .div1{
 7             width: 900px;
 8             height: 200px; 
 9             background-image: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg);
10             background-repeat: no-repeat;
11             background-size: 300px 200px;
12             background-position: 0 0,300px 0,600px,0;
13         }
14         .div1 img{
15             width: 20px;
16             height: 20px;
17         }

 

 

 

    大概就是这个效果啦

   4.将div1的宽度设置为一张图片的宽度,就定义一个相当于用户的可见窗口

1               .div1{
2             width: 300px;        /*设置div宽度为一张图片的宽度*/
3             height: 200px; 
4             border: 10px solid green;
5             background-image: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg);
6             background-repeat: no-repeat;
7             background-size: 300px 200px;
8             background-position: 0 0,300px 0,600px,0;
9         }

    效果:

    5.由于设置的窗口大小,剩余的两张图片不可见了,相当于屋子里面有三个人,你从一个窗口看进去,只看到了一个人,其他人被墙壁遮住了,这时如果这个人往左走,离开窗口,第二个人走到窗口位置,就可以看到第二个人了。

 1          .div1{
 2             width: 300px;        /*设置div宽度为一张图片的宽度*/
 3             height: 200px; 
 4             border: 10px solid green;
 5             background-image: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg);
 6             background-repeat: no-repeat;
 7             background-size: 300px 200px;
 8             /*background-position: 0 0,300px 0,600px,0;*/
 9             background-position: -300px 0,0 0,300px,0;        /*图片左移*/
10         }

    效果:

    6.当这三个人不断重复这种移动,就会对窗户外的你形成轮播效果,css3的关键帧动画就可以实现这种重复不断的移动,不了解的同学可以自行百度,这里就不细说关键帧动画原理了。

css3关键代码:

 1 .home{
 2     width: 320px;        /*为了适应iphone5的分辨率设置的宽度*/
 3     height: 200px;
 4     background: url(../img/轮播1.jpg),url(../img/轮播2.jpg),url(../img/轮播3.jpg),url(../img/轮播1.jpg);
 5     /*第四张图片与第一张图片一致是为了轮播的时候效果更加自然,否则从最后一张播放到第一张会造成生硬的停顿*/
 6     
 7     background-repeat: no-repeat;
 8     background-size: 320px 200px;
 9     animation: kbg 9s linear infinite;
10     /*调用kbg关键帧动画,动画时长为9s,匀速运动,无限循环播放(除非页面被关闭)*/
11 }
12 @keyframes kbg{
13     0%{
14         background-position: 0 0,320px 0,640px 0,960px 0;
15     }
16     5%{
17         background-position: 0 0,320px 0,640px 0,960px 0;
18     }
19 
20     30%{
21         background-position: -320px 0,0 0,320px 0,640px 0;
22     }
23     40%{
24         background-position: -320px 0,0 0,320px 0,640px 0;
25     }
26 
27     60%{
28         background-position: -640px 0,-320px 0,0 0,320px 0;
29     }
30     70%{
31         background-position: -640px 0,-320px 0,0 0,320px 0;
32     }
33 
34     95%{
35         background-position: -960px 0,-640px 0,-320px 0,0 0;
36     }
37     100%{
38         background-position: -960px 0,-640px 0,-320px 0,0 0;
39     }
40 }

 

总结:关键帧轮播的视觉效果就和手机京东差不多,所缺的就是一些细节的地方。可能有人说网上的轮播器一大把,这样做是重复造轮子,但是我坚信学以致用,多练习才能理解和掌握知识要点。

题外话:

    小妹初来乍到,望大家捧个人场,多多评论指正,最好加个关注呢,期待和各位的交流~

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:&gt;&gt;我要做特工系列 之 CSS 3_animation_向右滑出后下滑并停

下一篇:商城底部链接