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

约定不等于承诺〃 2023-06-02 13:55 17阅读 0赞

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

**思路：**仔细观察可以发现，手机京东的头部是以一个搜索栏和轮播特效组成的，而这个搜索栏是以轮播特效做为背景的，现在运用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         }

效果：

![1060557-20170731194747833-1602180418.png][]

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

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

效果：

![1060557-20170731203140677-2057517410.png][]

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

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

效果：

![1060557-20170731203531380-1029469166.png][]

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

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

效果：

![1060557-20170731204054958-1633769297.png][]

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         }

大概就是这个效果啦

![1060557-20170731192920630-1438383368.jpg][]

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         }

效果：

![1060557-20170731210304333-1678371019.jpg][]

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         }

效果：

![1060557-20170731211123380-118301774.png][]

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 }

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

**题外话：**

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

转载于:https://www.cnblogs.com/CodeShero/p/7265855.html

[1060557-20170731194747833-1602180418.png]: /images/20230601/05f7b55812514166947ab6a0f8f2fe78.png
[1060557-20170731203140677-2057517410.png]: /images/20230601/1715f6c90f1e4d3f8538929330c782f4.png
[1060557-20170731203531380-1029469166.png]: /images/20230601/3b12bd92cf6e480aa7270555234edb41.png
[1060557-20170731204054958-1633769297.png]: /images/20230601/ec55c6c19e3e48b4ace489fc5defd70f.png
[1060557-20170731192920630-1438383368.jpg]: /images/20230601/13e0042577fd42eebc971419cb0ec94e.png
[1060557-20170731210304333-1678371019.jpg]: /images/20230601/c9d24dadcfe540b3b396c73231765782.png
[1060557-20170731211123380-118301774.png]: /images/20230601/27db3a5d605a4b72bdbea417072cace6.png