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, demo;

@layer demo {
  body{
    font-family: "Jura", sans-serif;
    height: 100svh;
  }

  @property --rotation{
    syntax: "<angle>";
    inherits: true;
    initial-value: 0;
  }
  input{
    z-index: 190;
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
	.wrapper {
		--card-trans-duration: 1000ms;
		--card-trans-easing:linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);

		--card-width: clamp(40px,7vw, 120px);
		--card-border-radius: 1vw;

		--radius: 40vmin; 
		--cards: sibling-count();
		--arc-size: .95;             /* essentially the distance between cards */
		--arc-center: 0.275;        /* start at bottom to last card will be at the top */
		--arc-start: calc(var(--arc-center) - var(--arc-size) / 2);

		--arc-shift-delta: 0.0075;
	
	
		anchor-name: --center;

		position: fixed; 
		inset: 0;
		margin: auto;
		wi.........完整代码请登录后点击上方下载按钮下载查看