单个div+css实现一个图片幻灯片效果代码-html代码-BFW代码库

单个div+css实现一个图片幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：单个div+css实现一个图片幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .slider {
          --s:40px; /* control the size of the stripes */
          
          max-width:400px;
          aspect-ratio:4/3;
          margin:20px auto;
          display:grid;
          background:center/cover;
          animation:s1 8s linear infinite;
        }
        .slider:before {
          content:"";
          --g:repeating-conic-gradient(#000 0 25%,#0000 0 50%);
          -webkit-mask:var(--g) 0 0,var(--g) 0 0;
                  mask:var(--g) 0 0,var(--g) 0 0;
          -webkit-mask-size:calc(2*var(--s)) calc(2*var(--s));
                  mask-size:calc(2*var(--s)) calc(2*var(--s));
          -webkit-mask-composite:xor;
                  mask-composite:exclude;
          background:center/cover;
          animation:inherit;
          animation-name:p,s2;
        }
        @keyframes p{
          0% ,10%,
          85%,100% {-webkit-mask-position:0        0       ,0 0;
                            mask-position:0        0       ,0 0}
          15%,35%  {-webkit-mask-position:var(--s) 0       ,0 0;
                            mask-position:var(--s) 0       ,0 0}
          40%,6.........完整代码请登录后点击上方下载按钮下载查看