css布局实现横向拖动的相片相册胶卷效果代码
代码语言:html
所属分类:画廊相册
代码描述:css布局实现横向拖动的相片相册胶卷效果代码,在pc端可以用键盘方向键左右移动,移动端可直接左右拖动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --main-bg: #090909; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } body { position: relative; display: flex; justify-content: center; align-items: center; padding: 1rem; min-height: 100vh; color: #ffffff; background-color: var(--main-bg); overflow: hidden; } img { display: block; max-width: 100%; object-fit: cover; } .wrapper { position: relative; padding: 28px 0; background-color: #333; box-shadow: inset 0 2px 10px 0 #000, inset 0 -2px 10px 0 #000, inset -8px 0 5px 0 #000, inset -10px 0 9px 0 #fff; transform: perspective(1000px) rotateY(10deg); } .wrapper::before, .wrapper::after { content: ""; display: block; position: absolute; left: 0; --width: 12px; width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0