VanillaTilt实现视觉差异商品图片悬浮交互效果代码
代码语言:html
所属分类:视觉差异
代码描述:VanillaTilt实现视觉差异商品图片悬浮交互效果代码,鼠标移动图层呈现视觉差异效果。
代码标签: VanillaTilt 视觉差异 商品 悬浮 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,900;1,900&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } :root { --main-bg: #f8f8f8; --box-bg: #ffffff; --name-color: #232323; --card-bg-text: #343434; } .dark:root { --main-bg: #131313; --box-bg: #232323; --name-color: #f8f8f8; --card-bg-text: #ffffff; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--main-bg); } .container { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 1200px; transform-style: preserve-3d; } .container .box { position: relative; width: 300px; height: 400px; margin: 40px; background: var(--box-bg); border-radius: 20px; transform-style: preserve-3d; } .container .box::before { content: "NIKE"; position: absolute; top: 20px; left: 20px; font-size: 6em; font-weight: 900; color: var(--card-bg-text); font-style: italic; opacity: 0; transition: 0.5s; } .container .box::after { content: "SHOES"; position: absolute; bottom: 20px; right: 20px; font-size: 4.5em; font-weight: 900; color: var(--card-bg-text); font-style: italic; opacity: 0; transition: 0.5s; } .container .box:hover::after, .container .box:hover::before { opacity: 0.04; } .container .box .name { position: absolute; top: 0; left: 0; text-align: center; color: var(--name-color); width: 100%; transform-style: preserve-3d; transform: translate3d(0, 0, 75px); transition: 0.5s; opacity: 0; z-index: 10; } .container .box:hover .name { top: 40px; opacity: 1; } .container .box .buy { position: absolute; bottom: 0; left: 50%; transform-style: preserve-3d; transform: translate3d(0, 0, 75px); color: #fff; background: #333; padding: 10px 25px; border-radius: 30px; text-decoration: none; transition: 0.5s; opacity: 0; z-index: 10; } .container .box:hover .buy { bottom: 30px; opacity: 1; } .container .box .circle { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 50%; transition: 0.5s; background: #ffffff; transform-style: preserve-3d; z-index: 10; opacity: 1; transform: translate3d(-50%, -50%, 0px); } .container .box:hover .circle { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 50%; transition: 0.5s; background: #ffffff; transform-style: preserve-3d; z-index: 10; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0