CSS3-幻灯片

最新推荐文章于 2023-09-28 10:59:22 发布

南乡人

最新推荐文章于 2023-09-28 10:59:22 发布

阅读量170

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37086982/article/details/103731269

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

利用绝对定位和交错动画实现镜头拉伸背景效果(Ken Burns Effect)

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
      body {
        margin: 0;
        padding: 0;
        background: black;
      }

      main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Lora, serif;
        letter-spacing: 0.2em;
        color: white;
      }
      main h1 {
        font-size: 250%;
        text-shadow: 0 2px 2px black;
      }

      .ken-burns-slideshow {
        position: fixed;
        z-index: -2;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        list-style-type: none;
      }
     .ken-burns-slideshow .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transform: scale(1.2);   /* 缩放 */
        animation: kenburns 24s linear infinite;   /* 过渡 */
      }
    
      /* 控制显示第几个 */
      .ken-burns-slideshow .slide:nth-child(1) {
        animation-delay: 0s;
      }
         
      .ken-burns-slideshow .slide:nth-child(2) {
        animation-delay: 6s;
      }
      .ken-burns-slideshow .slide:nth-child(3) {
        animation-delay: 12s;
      }
      .ken-burns-slideshow .slide:nth-child(4) {
        animation-delay: 18s;
      }

      #slide1 {
        background-image: url("https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg");
      }

      #slide2 {
        background-image: url("https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg");
      }

      #slide3 {
        background-image: url("https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg");
      }

      #slide4 {
        background-image: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg");
      }
      @keyframes kenburns {
        10% {
          opacity: 1;
        }
        25% {
          opacity: 1;
          transform: scale(1);
        }
        40% {
          opacity: 0;
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <main>
      <ul class="ken-burns-slideshow">
        <li class="slide" id="slide1"></li>
        <li class="slide" id="slide2"></li>
        <li class="slide" id="slide3"></li>
        <li class="slide" id="slide4"></li>
      </ul>
      <section>
        <h1>Pure CSS Ken Burns Effect</h1>
      </section>
    </main>
  </body>
</html>

利用sticky现滑动幻灯片

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
      body {
        margin: 0;
        padding: 0;
      }

      .container {
        height: 100vh;
        font-family: Lora, serif;
        overflow-x: hidden;
      }

      .slide {
        position: -webkit-sticky;
        position: sticky; /*实现关键所在*/
        top: 0;    /*实现关键所在*/
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 0.2em;
        color: white;
        background-size: cover;
        background-position: center;
      }
      .slide h1 {
        font-size: 250%;
        text-shadow: 0 2px 2px black;
      }

      #slide1 {
        background-image: url("https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg");
      }

      #slide2 {
        background-image: url("https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg");
      }

      #slide3 {
        background-image: url("https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg");
      }

      #slide4 {
        background-image: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg");
      }
    </style>
  </head>
  <body>
    <main class="container">
      <section class="slide sticky" id="slide1">
        <h1>Pure CSS Sticky Sections</h1>
      </section>
      <section class="slide sticky" id="slide2">
        <h1>Set to full page for best experience.</h1>
      </section>
      <section class="slide sticky" id="slide3">
        <h1>No JavaScript Required</h1>
      </section>
      <section class="slide sticky" id="slide4">
        <h1>End</h1>
      </section>
    </main>
  </body>
</html>

南乡人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-幻灯片

利用绝对定位和交错动画实现镜头拉伸背景效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g...
复制链接

扫一扫

专栏目录