lit.js实现图文幻灯片切换效果代码-html代码-BFW代码库

lit.js实现图文幻灯片切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：lit.js实现图文幻灯片切换效果代码，使用LitElement与html实现。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
@property --rotate {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: true;
}

body {
        height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
        font-family: system-ui, sans-serif;
        line-height: 1.5;
}

activities-widget {
        display: grid;
        gap: 0.5rem 2rem;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        max-inline-size: 300px;

        > * {
                grid-area: 1/1/1/1;
        }

        &.children-animating {
                .img {
                        --rotate: 0deg;
                }
        }

        .activity {
                display: grid;
                grid-template-rows: subgrid;
                grid-template-columns: subgrid;
                grid-column: 1 / -1;
                grid-row: 1 / -1;

                &:nth-child(1) {
                        --rotate: 4deg;
                }

                &:nth-child(2) {
                        --rotate: -2deg;
                }

                &:nth-child(3) {
                        --rotate: -9deg;
                }

                &:nth-child(4) {
                        --rotate: 7deg;
                }

                .img {
                        grid-column: 1 / 2;
                        grid-row: 1 / 4;
                        max-inline-size: 100%;
                        rotate: var(--rotate, 0deg);
                        transition: 0.25s linear;

                        img {
                                aspect-ratio: 1;
                                border-radius: 0.25rem;
                                border: 3px solid white;
                                box-shadow: 0 0 5px #0003;
                                object-fit: cover;
                                inline-size: 100%;
                        }
                }

                &.active {
                        .img {
                                animation: 0.5s ease-in-out fly-out;
                                animation-fill-mode: forwards;
                        }

                        .text {
                                opacity: 1;
                                translate: 0 0;
                                transition-delay: 0.1s;
                                pointer-events: all;
                        }
                }

                .text {
                        grid-column: 2 / 3;
                        grid-row: 2 / 3;
                        opacity: 0;
                        transition: 0.25s ease-in-out;
                        translate: 0 20px;
                        pointer-events: none;
                }
        }

        .activities-count {
                grid-column: 2 / 3;
                grid-row: 1 / 2;
        }

        .activities-nav {
                grid-column: 2 / 3;
                .........完整代码请登录后点击上方下载按钮下载查看