zoukankan      html  css  js  c++  java
  • CSS实战笔记(六) 无缝轮播图

    1、效果演示

    2、完整代码

    <!DOCTYPE html>
    <html>
    
    <head>
      <style>
        html {
          background-color: white;
           100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        }
        .frame {
           500px;
          min- 500px;
          height: 300px;
          min-height: 300px;
          border: 5px solid whitesmoke;
          box-shadow: 1px 1px 5px gray;
          position: relative;
          overflow: hidden;
        }
        .slide {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
           100%;
          height: 100%;
        }
        .slide-animation-1 {
          animation: switch-slide-1 10s ease-in-out infinite;
        }
        .slide-animation-2 {
          animation: switch-slide-2 10s ease-in-out infinite;
        }
        .slide-animation-3 {
          animation: switch-slide-3 10s ease-in-out infinite;
        }
        .slide-animation-4 {
          animation: switch-slide-4 10s ease-in-out infinite;
        }
        @keyframes switch-slide-1 {
          0%   { opacity: 1; left: 0px; }
          /* 展示 */
          20%  { opacity: 1; left: 0px; }
          /* 切出 */
          25%  { opacity: 0; left: 500px; }
          /* 归位 */
          26%  { opacity: 0; left: -500px; }
          /* 等待 */
          95%  { opacity: 0; left: -500px; }
          /* 切入 */
          100% { opacity: 1; left: 0px; }
        }
        @keyframes switch-slide-2 {
          0%   { opacity: 0; left: -500px; }
          /* 等待 */
          20%  { opacity: 0; left: -500px; }
          /* 切入 */
          25%  { opacity: 1; left: 0px; }
          /* 展示 */
          45%  { opacity: 1; left: 0px; }
          /* 切出 */
          50%  { opacity: 0; left: 500px; }
          /* 归位 */
          51%  { opacity: 0; left: -500px; }
          /* 等待 */
          100% { opacity: 0; left: -500px; }
        }
        @keyframes switch-slide-3 {
          0%   { opacity: 0; left: -500px; }
          /* 等待 */
          45%  { opacity: 0; left: -500px; }
          /* 切入 */
          50%  { opacity: 1; left: 0px; }
          /* 展示 */
          70%  { opacity: 1; left: 0px; }
          /* 切出 */
          75%  { opacity: 0; left: 500px; }
          /* 归位 */
          76%  { opacity: 0; left: -500px; }
          /* 等待 */
          100% { opacity: 0; left: -500px; }
        }
        @keyframes switch-slide-4 {
          0%   { opacity: 0; left: -500px; }
          /* 等待 */
          70%  { opacity: 0; left: -500px; }
          /* 切入 */
          75%  { opacity: 1; left: 0px; }
          /* 展示 */
          95%  { opacity: 1; left: 0px; }
          /* 切出 */
          100% { opacity: 0; left: 500px; }
        }
      </style>
    </head>
    
    <body>
      <div class="frame">
        <img class="slide slide-animation-1" src="https://cdn.pixabay.com/photo/2014/12/14/12/26/evening-567840__340.jpg" alt="">
        <img class="slide slide-animation-2" src="https://cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513__340.jpg" alt="">
        <img class="slide slide-animation-3" src="https://cdn.pixabay.com/photo/2017/03/29/15/18/tianjin-2185510__340.jpg" alt="">
        <img class="slide slide-animation-4" src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg" alt="">
      </div>
    </body>
    
    </html>
    

    【 阅读更多 CSS 系列文章,请看 CSS学习笔记

    版权声明:本博客属于个人维护博客,未经博主允许不得转载其中文章。
  • 相关阅读:
    Class 、NSObject、id
    xcode8.2 打包问题
    JS WEB 交互问题
    C语言 关于内存动态分配问题
    Objective-C( Category 分类,非正式协议,分类延展)
    NSComparisonResul、NSNotFound、NSEnumerationOptions......的用处
    Objective-C( Foundation框架 一 常见的结构体)
    Objective-C( Foundation框架 一 数组(NSMutableArray))
    Objective-C( Foundation框架 一 数组(NSArray))
    Objective-C( Foundation框架 一 字符串)
  • 原文地址:https://www.cnblogs.com/wsmrzx/p/11788808.html
Copyright © 2011-2022 走看看