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(.........完整代码请登录后点击上方下载按钮下载查看