div+js实现可滚动曲面相册画廊效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+js实现可滚动曲面相册画廊效果代码,悬浮可放大。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background-color: darkblue; margin: 0; } .curved-grid { list-style: none; margin: 20px; padding-inline-start: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; --x: 60; --y: 100; transform-style: preserve-3d; perspective: calc(var(--x) * 1vw); perspective-origin: center; animation: animate-perspective-origin linear 2s; animation-play-state: paused; animation-delay: calc(var(--scroll, 0) * -1s); animation-iteration-count: 1; animation-fill-mode: both; } @supports (animation-timeline: view()) { .curved-grid { animation: animate-perspective-origin-timeline linear 2s; animation-play-state: revert; animation-timeline: view(); } } .curved-grid li { aspect-ratio: 16/9; border: 5px rebeccapurple ridge; display: grid; place-content: center; background: lightgrey; border-radius: 8px; transform-origin: center center; transition: transform 0.5s ease-in-out; /* Many thanks to mooey and claude for putting up with my nerd snipe*/ --translatez: calc( ( var(--x) * cos(var(--theta)) / (cos(atan(var(--y) / (2 * var(--x))))) - var(--x) ) * -1vw ); transform: translatez(var(--translatez)) rotatey(var(--angle)); } .curved-grid li:nth-child(4n-3) { --theta: 35deg; --angle: 35deg; } .curved-grid li:nth-child(4n-2) { --theta: 20deg; --angle: 15deg; } .curved-grid li:nth-child(4n-1) { --theta: -20deg; --angle: -15deg; --mod: -1; } .curved-grid li:nth-child(4n) { --theta: -35deg; --angle: -35deg; --mod: -1; } .curved-grid li:hover { transform: none; } @keyframes animate-perspective-origin { 0% { perspective-origin: 50% 0%; } 100% { perspective-origin: 50% 150%; } } @keyframes animate-perspective-origin-timeline { 0% { perspective-origin: 50% -10%; } 100% { perspective-origin: 50% 110%; } } </style> </head> <body translate="no"> <ul class="curved-grid"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0