div+css实现卡通人物卡片立体倒影旋转幻灯片动画效果代码-html代码-BFW代码库

div+css实现卡通人物卡片立体倒影旋转幻灯片动画效果代码

代码语言：html

所属分类：幻灯片

代码描述：div+css实现卡通人物卡片立体倒影旋转幻灯片动画效果代码，鼠标悬浮可暂停聚焦人物卡片高亮。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);

@layer base, cards;

@layer cards {
	:root {
		--carousel-duration: 30s;
		--carousel-depth: 180px;
		--card-width: 80px;
		--card-height: 120px;

  	@media (width > 600px) {
			--carousel-depth: 330px;
			--card-width: 120px;
			--card-height: 180px;
		}
	}

	body {
		perspective: 1000px;
		overflow: hidden;
	}

	.carousel {
    /* total number of elements */
    --card-count: sibling-count();
    @supports not (order: sibling-index()) {
      /* fallback for browsers that don't support sibling-index*/
      --card-count: 9;
    }

		transform-style: preserve-3d;
		position: absolute;
		inset: 0;
		margin: auto;

		/* pause carsousel when card gets hover */
		&:has(.card:hover) .card {
			animation-play-state: paused;
		}
		&:has(.card:hover) .card:not(:hover) > *  {
			opacity: .25;
		}

	}
@property --reflect-distance {
  syntax: "<length>";
  initial-value: 5px;
  inherits: false;
}

	.card {
    /* get card index */
    --i: sibling-index();
     @supports not (order: sibling-index()) {
.........完整代码请登录后点击上方下载按钮下载查看