div+css实现三维空间照片围成一圈倒影旋转悬浮变彩色动画效果代码
代码语言:html
所属分类:三维
代码描述:div+css实现三维空间照片围成一圈倒影旋转悬浮变彩色动画效果代码
代码标签: div css 三维 空间 照片 围成 一圈 倒影 旋转 悬浮 变 彩色 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* vars */ :root { --carousel-transition-duration: 250ms; --carousel-transition-ease: ease-out; --carousel-bg-color-rgb: 0, 0, 0; --carousel-shadow-color-rgb: 128, 128, 128; --carousel-item-width: 11.5rem; --carousel-item-height: 17.5rem; --carousel-item-hover-effect: 1.075; --carousel-item-reflection-blur: 0.25rem; --carousel-item-empty-color-rgb: 255, 255, 255; --carousel-item-glow-color-rgb: 255, 255, 255; --carousel-item-glow-size: 5rem; --carousel-diameter: 50rem; --carousel-3d-perspective: 1000px; --carousel-3d-perspective-origin: 50% 20%; --carousel-control-button-width: 1.25rem; --carousel-control-button-height: 4rem; --carousel-control-color-rgb: 255, 255, 255; --carousel-animation-duration: 25s; --carousel-animation-play-state: running; --carousel-direction-animation-play-state: paused; } /* global */ *, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; } *:focus { outline: none; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: rgb(var(--carousel-bg-color-rgb)); overflow: hidden; } /* carousel */ .carousel { --_diameter: var(--carousel-diameter); --_radius: calc(var(--_diameter) / 2); --_item-width: var(--carousel-item-width); --_item-height: var(--carousel-item-height); perspective: var(--carousel-3d-perspective); perspective-origin: var(--carousel-3d-perspective-origin); width: var(--_diameter); height: var(--_diameter); } @media only screen and (max-width: 48rem) { .carousel { --_diameter: calc(var(--carousel-diameter) * 0.75); --_item-width: calc(var(--carousel-item-width) * 0.75); --_item-height: calc(var(--carousel-item-height) * 0.75); } } @media only screen and (max-width: 32rem) { .carousel { --_diameter: calc(var(--carousel-diameter) * 0.6); --_item-width: calc(var(--carousel-item-width) * 0.6); --_item-height: calc(var(--carousel-item-height) * 0.6); } } @media only screen and (max-width: 16rem) { .carousel { --_diameter: calc(var(--carousel-diameter) * 0.25); --_item-width: calc(var(--carousel-item-width) * 0.25); --_item-height: calc(var(--carousel-item-height) * 0.25); } } .carousel .carousel-control-button { --_width: var(--carousel-control-button-width); --_height: var(--carousel-control-button-height); z-index: 1; width: var(--_width); height: var(--_height); background-color: rgb(var(--carousel-control-color-rgb)); opacity: 0.2; transition: opacity var(--carousel-transition-duration) var(--carousel-transition-ease); position: absolute; } .carousel .carousel-control-button:hover { opacity: 0.4; } .carousel .carousel-control-button:has(input:checked) { opacity: 0.8; } .carousel .carousel-control-button input { -webkit-appearance: none; appearance: none; opacity: 0; width: 100%; height: 100%; cursor: pointer; } .carousel .carousel-control-button.left { clip-path: polygon(0% 50%, 100% 0%, 100% 100%); top: calc(var(--_radius) - var(--_height) / 2); left: 0; } .carousel:has(.carousel-control-button.left input:checked) { --carousel-direction-animation-play-state: running; } .carousel .carousel-control-button.right { clip-path: polygon(0% 0%, 100% 50%, 0% 100%); top: calc(var(--_radius) - var(--_height) / 2); right: 0; } .carousel:has(.carousel-control-button.right input:checked) { --carousel-direction-animation-play-state: paused; } .carousel .carousel-rotation-direction { --_direction-animation-play-state: var(--carousel-direction-animation-play-state); --_z: calc(var(--_radius) * -1); transform: translateZ(var(--_z)); transform-style: preserve-3d; animation: carousel-rotation-reverse calc(var(--carousel-animation-duration) / 2) reverse linear infinite var(--_direction-animation-play-state); transition: all var(--carousel-transition-duration) var(--carousel-transition-ease); } @keyframes carousel-rotation-reverse { from {transform: translateZ(var(--_z)) rotateY(0deg);} to {transform: translateZ(var(--_z)) rotateY(360deg);} } @keyframes carousel-rotation-normal { from {transform: rotateY(0deg);} to {transform: rotateY(360deg);} } .carousel .carousel-item-wrapper { transform-style: inherit; width: inherit; height: inherit; list-style-type: none; position: relative; animation: carousel-rotation-normal var(--carousel-animation-duration) normal linear infinite var(--carousel-animation-play-state); transition: all var(--carousel-transition-duration) var(--carousel-transition-ease); } .carousel .carousel-rotation-direction:has(.carousel-item:hover) { --carousel-animation-play-state: paused; --_direction-animation-play-state: paused; } .carousel .carousel-item { --_width: var(--_item-width); --_height: var(--_item-height); --_rotation: calc(360 / var(--_num-elements) * var(--_index) * 1deg); left: calc(var(--_radius) - var(--_item-width) / 2); top: calc(var(--_radius) - var(--_item-height) / 2); transform: rotateY(var(--_rotation)) translateZ(var(--_radius)); transform-style: inherit; width: var(--_width); height: var(--_height); transition: all var(--carousel-transition-duration) var(--carousel-transition-ease); box-shadow: 0 0 var(--carousel-item-glow-size) transparent; position: absolute; } .carousel ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0