CSS3中怎么利用animation实现幻灯片轮播特效-创新互联

CSS3 中怎么利用animation实现幻灯片轮播特效,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

成都创新互联是一家集网站建设,常州企业网站建设,常州品牌网站建设,网站定制,常州网站建设报价,网络营销,网络优化,常州网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

代码


  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <title>CSS3幻灯片</title>

  6.     <style type="text/css" media="screen">

  7.         .items {

  8.             width: 280px;

  9.             height: 150px;

  10.             border: 1px solid #ddd;

  11.                 box-sizing: border-box;

  12.                 border-radius:10px;

  13.                 background-size: cover;

  14.             -webkit-transform: translateZ(0);

  15.             transform: translateZ(0);

  16.                 background-repeat: no-repeat;

  17.             -webkit-animation: slider 15s linear infinite alternate;

  18.             animation: slider 15s linear infinite alternate;

  19.             -webkit-transform-origin: center center;

  20.                     transform-origin: center center;

  21.         }

  22.         @-webkit-keyframes slider {

  23.             0% {

  24.                 background-image: url(1.jpg) ;

  25.             }

  26.             25% {

  27.                 background-image: url(2.jpg) ;

  28.             }

  29.             50% {

  30.                 background-image: url(3.jpg) ;

  31.             }

  32.             75% {

  33.                 background-image: url(4.jpg);

  34.             }

  35.             100% {

  36.                 background-image: url(5.jpg);

  37.             }

  38.         }

  39. @keyframes slider {

  40.             0% {

  41.                 background-image: url(1.jpg) ;

  42.             }

  43.             25% {

  44.                 background-image: url(2.jpg) ;

  45.             }

  46.             50% {

  47.                 background-image: url(3.jpg) ;

  48.             }

  49.             75% {

  50.                 background-image: url(4.jpg);

  51.             }

  52.             100% {

  53.                 background-image: url(5.jpg);

  54.             }

  55.         }

  56.     </style>

  57. </head>

  58. <body>

  59.     <div class="slider">

  60.         <div class="items"></div>

  61.     </div>

  62. </body>

  63. </html>

看完上述内容,你们掌握CSS3 中怎么利用animation实现幻灯片轮播特效的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!

文章题目:CSS3中怎么利用animation实现幻灯片轮播特效-创新互联
网页地址:https://www.cdcxhl.com/article22/dchdjc.html

成都网站建设公司_创新互联,为您提供域名注册网站排名外贸网站建设营销型网站建设电子商务Google

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司