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