设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › html+css酷炫的3D旋转相册(附源码)
返回列表 发新帖
查看: 96|回复: 0

html+css酷炫的3D旋转相册(附源码)

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:42:04 | 显示全部楼层 |阅读模式
实现效果

111.gif
源码(html部分)

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>图像缩放</title>
  8.   <link rel="stylesheet" href="./style.css">

  10. </head>

  12. <body>
  13.   <div class="carousel">

  15.     <div class="control-button left"><input type="radio" name="control-input"></div>
  16.     <div class="control-button right"><input type="radio" name="control-input" checked></div>

  18.     <div class="rotation-direction">

  20.       <ul class="item-wrapper" style="--_num-elements: 11">

  22.         <li class="item"
  23.           style="--_index: 1; --_image-url: url('https://images.unsplash.com/photo-1730722005859-f93a79460bae?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  24.           <a href="#" target="_blank"></a>
  25.         </li>
  26.         <li class="item"
  27.           style="--_index: 2; --_image-url: url('https://images.unsplash.com/photo-1730815664512-238cea535eff?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  28.           <a href="#" target="_blank"></a>
  29.         </li>
  30.         <li class="item"
  31.           style="--_index: 3; --_image-url: url('https://images.unsplash.com/photo-1731128976871-9dc558f0c3c4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  32.           <a href="#" target="_blank"></a>
  33.         </li>
  34.         <li class="item"
  35.           style="--_index: 4; --_image-url: url('https://images.unsplash.com/photo-1730407401172-aeed1b1ace5b?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  36.           <a href="#" target="_blank"></a>
  37.         </li>
  38.         <li class="item"
  39.           style="--_index: 5; --_image-url: url('https://images.unsplash.com/photo-1730724583278-151efd042e16?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  40.           <a href="#" target="_blank"></a>
  41.         </li>
  42.         <li class="item"
  43.           style="--_index: 6; --_image-url: url('https://images.unsplash.com/photo-1731000891359-b430173e8491?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  44.           <a href="#" target="_blank"></a>
  45.         </li>
  46.         <li class="item"
  47.           style="--_index: 7; --_image-url: url('https://images.unsplash.com/photo-1730435136320-1410fa8bed02?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  48.           <a href="#" target="_blank"></a>

  50.         </li>
  51.         <li class="item"
  52.           style="--_index: 8; --_image-url: url('https://images.unsplash.com/photo-1730523169782-31cb72f147ff?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  53.           <a href="#" target="_blank"></a>

  55.         </li>
  56.         <li class="item"
  57.           style="--_index: 9; --_image-url: url('https://images.unsplash.com/photo-1730405704088-3d8f36e32b62?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  58.           <a href="#" target="_blank"></a>

  60.         </li>
  61.         <li class="item"
  62.           style="--_index: 10; --_image-url: url('https://images.unsplash.com/photo-1717764737741-b22a89548750?q=80&w=1970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  63.           <a href="#" target="_blank"></a>

  65.         </li>
  66.         <li class="item"
  67.           style="--_index: 11; --_image-url: url('https://images.unsplash.com/photo-1730386547603-918a97d624d4?q=80&w=1990&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
  68.           <a href="#" target="_blank"></a>
  69.         </li>

  71.         <li class="carousel-ground"></li>

  73.       </ul>

  75.     </div>

  77.   </div>

  79. </body>

  81. </html>
复制代码
源码(css部分 创建一个style.css文件)
  1.   :root {
  2.       --transition-duration: 250ms;
  3.       --transition-ease: ease-out;
  4.       --bg-color-rgb: 0, 0, 0;
  5.       --shadow-color-rgb: 128, 128, 128;
  6.       --item-width: 11.5rem;
  7.       --item-height: 17.5rem;
  8.       --hover-effect: 1.075;
  9.       --reflection-blur: 0.25rem;
  10.       --empty-color-rgb: 255, 255, 255;
  11.       --glow-color-rgb: 255, 255, 255;
  12.       --glow-size: 5rem;
  13.       --diameter: 50rem;
  14.       --perspective: 1000px;
  15.       --perspective-origin: 50% 20%;
  16.       --control-button-width: 1.25rem;
  17.       --control-button-height: 4rem;
  18.       --control-color-rgb: 255, 255, 255;
  19.       --animation-duration: 25s;
  20.       --animation-play-state: running;
  21.       --direction-animation-play-state: paused;
  22.     }

  24.     *,
  25.     *::before,
  26.     *::after {
  27.       margin: 0;
  28.       padding: 0;
  29.       border: 0;
  30.       box-sizing: border-box;
  31.     }

  33.     *:focus {
  34.       outline: none;
  35.     }

  37.     a {
  38.       -webkit-tap-highlight-color: transparent;
  39.       user-select: none;
  40.     }

  42.     body {
  43.       display: flex;
  44.       align-items: center;
  45.       justify-content: center;
  46.       height: 100vh;
  47.       background-color: rgb(var(--bg-color-rgb));
  48.       overflow: hidden;
  49.     }

  51.     .carousel {
  52.       --_diameter: var(--diameter);
  53.       --_radius: calc(var(--_diameter) / 2);
  54.       --_item-width: var(--item-width);
  55.       --_item-height: var(--item-height);
  56.       perspective: var(--perspective);
  57.       perspective-origin: var(--perspective-origin);
  58.       width: var(--_diameter);
  59.       height: var(--_diameter);
  60.     }

  62.     @media only screen and (max-width: 48rem) {
  63.       .carousel {
  64.         --_scale: 0.75;
  65.         --_diameter: calc(var(--diameter) * var(--_scale));
  66.         --_item-width: calc(var(--item-width) * var(--_scale));
  67.         --_item-height: calc(var(--item-height) * var(--_scale));
  68.       }
  69.     }

  71.     @media only screen and (max-width: 32rem) {
  72.       .carousel {
  73.         --_scale: 0.6;
  74.         --_diameter: calc(var(--diameter) * var(--_scale));
  75.         --_item-width: calc(var(--item-width) * var(--_scale));
  76.         --_item-height: calc(var(--item-height) * var(--_scale));
  77.       }
  78.     }

  80.     @media only screen and (max-width: 16rem) {
  81.       .carousel {
  82.         --_scale: 0.25;
  83.         --_diameter: calc(var(--diameter) * var(--_scale));
  84.         --_item-width: calc(var(--item-width) * var(--_scale));
  85.         --_item-height: calc(var(--item-height) * var(--_scale));
  86.       }
  87.     }

  89.     .control-button {
  90.       --_width: var(--control-button-width);
  91.       --_height: var(--control-button-height);
  92.       z-index: 1;
  93.       width: var(--_width);
  94.       height: var(--_height);
  95.       background-color: rgb(var(--control-color-rgb));
  96.       opacity: 0.2;
  97.       transition: opacity var(--transition-duration) var(--transition-ease);
  98.       position: absolute;

  100.       &:hover {
  101.         opacity: 0.4;
  102.       }

  104.       &:has(input:checked) {
  105.         opacity: 0.8;
  106.       }

  108.       & input {
  109.         appearance: none;
  110.         opacity: 0;
  111.         width: 100%;
  112.         height: 100%;
  113.         cursor: pointer;
  114.       }

  116.       &.left {
  117.         clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  118.         top: calc(var(--_radius) - var(--_height) / 2);
  119.         left: 0;
  120.       }

  122.       &.right {
  123.         clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  124.         top: calc(var(--_radius) - var(--_height) / 2);
  125.         right: 0;
  126.       }
  127.     }

  129.     .carousel:has(.control-button.left input:checked) {
  130.       --direction-animation-play-state: running;
  131.     }

  133.     .carousel:has(.control-button.right input:checked) {
  134.       --direction-animation-play-state: paused;
  135.     }

  137.     .rotation-direction {
  138.       --_direction-animation-play-state: var(--direction-animation-play-state);
  139.       --_z: calc(var(--_radius) * -1);
  140.       transform: translateZ(var(--_z));
  141.       transform-style: preserve-3d;
  142.       animation: rotation-reverse calc(var(--animation-duration) / 2) reverse linear infinite var(--_direction-animation-play-state);
  143.       transition: all var(--transition-duration) var(--transition-ease);
  144.     }

  146.     @keyframes rotation-reverse {
  147.       from { transform: translateZ(var(--_z)) rotateY(0deg); }
  148.       to { transform: translateZ(var(--_z)) rotateY(360deg); }
  149.     }

  151.     @keyframes rotation-normal {
  152.       from { transform: rotateY(0deg); }
  153.       to { transform: rotateY(360deg); }
  154.     }

  156.     .item-wrapper {
  157.       transform-style: inherit;
  158.       width: inherit;
  159.       height: inherit;
  160.       list-style-type: none;
  161.       position: relative;
  162.       animation: rotation-normal var(--animation-duration) normal linear infinite var(--animation-play-state);
  163.       transition: all var(--transition-duration) var(--transition-ease);
  164.     }

  166.     .rotation-direction:has(.item:hover) {
  167.       --animation-play-state: paused;
  168.       --_direction-animation-play-state: paused;
  169.     }

  171.     .item {
  172.       --_width: var(--_item-width);
  173.       --_height: var(--_item-height);
  174.       --_rotation: calc(360 / var(--_num-elements) * var(--_index) * 1deg);
  175.       left: calc(var(--_radius) - var(--_item-width) / 2);
  176.       top: calc(var(--_radius) - var(--_item-height) / 2);
  177.       transform: rotateY(var(--_rotation)) translateZ(var(--_radius));
  178.       transform-style: inherit;
  179.       width: var(--_width);
  180.       height: var(--_height);
  181.       transition: all var(--transition-duration) var(--transition-ease);
  182.       box-shadow: 0 0 var(--glow-size) transparent;
  183.       position: absolute;

  185.       &:hover {
  186.         box-shadow: 0 0 var(--glow-size) rgb(var(--glow-color-rgb));
  187.         transform: rotateY(var(--_rotation)) translateZ(calc(var(--_radius) * var(--hover-effect)));
  188.       }

  190.       & a {
  191.         display: block;
  192.         width: inherit;
  193.         height: inherit;
  194.         text-indent: -9999px;
  195.         background-color: rgba(var(--empty-color-rgb), 0.5);
  196.         background-image: var(--_image-url);
  197.         background-repeat: no-repeat;
  198.         background-position: center;
  199.         background-size: cover;
  200.         transition: filter var(--transition-duration) var(--transition-ease);
  201.         filter: grayscale(100%);

  203.         &:hover {
  204.           filter: grayscale(0%);
  205.         }
  206.       }

  208.       &::before {
  209.         content: '';
  210.         width: inherit;
  211.         height: inherit;
  212.         background-color: rgba(var(--empty-color-rgb), 0.5);
  213.         background-image:
  214.           linear-gradient(to top, rgba(var(--bg-color-rgb), 0.25) 0%, rgba(var(--bg-color-rgb), 1.0) 75%),
  215.           var(--_image-url);
  216.         background-repeat: no-repeat;
  217.         background-position: center;
  218.         background-size: cover;
  219.         pointer-events: none;
  220.         filter: blur(var(--reflection-blur)) grayscale(100%);
  221.         transition: filter var(--transition-duration) var(--transition-ease);
  222.         transform-style: inherit;
  223.         transform-origin: center bottom;
  224.         transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg);
  225.         position: absolute;

  227.         &:hover {
  228.           filter: blur(var(--reflection-blur)) grayscale(0%);
  229.         }
  230.       }
  231.     }

  233.     .ground {
  234.       --_width: var(--_diameter);
  235.       --_height: var(--_diameter);
  236.       --_rotation: 90deg;
  237.       left: calc(var(--_radius) - var(--_width) / 2);
  238.       top: calc(var(--_radius) - var(--_height) / 2);
  239.       transform: rotateX(var(--_rotation)) translateZ(calc(var(--_item-height) / -2));
  240.       width: var(--_width);
  241.       height: var(--_height);
  242.       border-radius: 50%;
  243.       background: radial-gradient(rgba(var(--shadow-color-rgb), 0.75) 15%, rgba(var(--bg-color-rgb), 0) 60%);
  244.       opacity: 0.5;
  245.       transition: opacity var(--transition-duration) var(--transition-ease);
  246.       position: absolute;

  248.       &.item-wrapper:has(.item:hover) {
  249.         opacity: 0.75;
  250.       }
  251.     }
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表