react实现一个立方方块的幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:react实现一个立方方块的幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); body { background: radial-gradient(circle, white 0%, #e6e6e6 100%); } .group { --block-width: 15vmin; --block-height: 4vmin; --block-depth: 1vmin; --font-size: 3em; --border-color: rgba(255,255,255,.2); --side-color: rgba(255,99,71,.6); --block-rotate-x: -20deg; --block-rotate-y: 30deg; perspective: 1000px; width: 50vmin; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .group .navigation { position: absolute; left: -50%; top: 50%; width: 50px; height: 120px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; transform: translateY(-50%); } .group .navigation div { display: grid; place-items: center; color: #fff; background-color: #282828; cursor: pointer; } .group .navigation .up { grid-column: 1/span 1; grid-row: 1/span 1; } .group .navigation .down { grid-column: 1/span 1; grid-row: 3/span 1; } .block { font-size: var(--font-size); width: var(--block-width); height: var(--block-height); transform-style: preserve-3d; transform: rotateX(var(--block-rotate-x)) rotateY(var(--block-rotate-y)); } .block .side { position: absolute; background: var(--side-color); border: 1px solid var(--border-color); color: white; text-align: center; line-height: 2em; background-size: calc(var(--block-width) + 2*var(--block-depth)) auto; } .block .front { width: var(--block-width); height: var(--block-height); transform: translateZ(calc(var(--block-depth) / 2)); cursor: pointer; background-position: calc(var(--block-depth) * -1) calc(var(--block-depth) * -1); text-align: left; box-sizing: border-box; padding: 2vmin 5vmin; font-family: "Press Start 2P", cursive; font-size: 5vmin; } .block .top { width: var(--block-width); height: var(--block-depth); transform: rotateX(90deg) translateZ(calc(var(--block-depth) / 2)); cursor: pointer; background-position: calc(var(--block-depth) * -1) 0; } .block .right { width: var(--block-depth); height: var(--block-height); transform: rotateY(90deg) translateZ(calc(var(--block-width) - var(--block-depth)/2)); background-position: top 0 right 0; } .block .left { width: var(--block-depth); height: var(--block-height); transform: rotateY(-90deg) translateZ(calc(var(--block-depth)/2)); cursor: pointer; background-position: 0 calc(var(--block-depth) * -1); } .block .bottom { width: var(--block-width); height: var(--block-depth); transform: rotateX(-90deg) translateZ(calc(var(--block-height) - var(--block-depth)/2)); background-position: bottom 0 right 0; } .block .back { width: var(--block-width); height: var(--block-height); transform: rotateY(-180deg) translateZ(calc(var(--block-depth) / 2)) scaleX(-1); background-position: calc(var(--block-depth) * -1) calc(var(--block-depth) * -1); } .item { position: absolute; pointer-events: none; } .item > * { pointer-events: auto; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="bg"> <div id="app"></div> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/typescript.min.js"></script> <script > "use strict"; const Slide = ({ content, delta, transformStep = 4, backgroundImage = '', selected }) => { const [xState, setXState] = React.useState(delta.x); const [yState, setYState] = React.useState(delta.y); const itemRef = React.useRef(null); React.useEffect(() => { setXState(delta.x); setYState(delta.y); }, [delta]); React.useEffect(() => { if (selected && itemRef) { console.log(itemRef.current.classList); setYState(delta.y - transformStep); } else { setYState(delta.y); } }, [selected]); const transformGenerator = (deltaX, deltaY) => { return { transform: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0