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