css实现鼠标悬浮相册内照片铺开动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现鼠标悬浮相册内照片铺开动画效果代码,类似于一个照片专辑,堆叠在一起,鼠标放上去就会将专辑内照片分散铺开展示。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { background-color: rgb(0, 0, 0); margin: 0px; height: 100vh; display: grid; place-items: center; } .card-groups, .card-group, .card { aspect-ratio: 5 / 7; } .card-groups, .card-group, .big-card { width: 30vmin; } .card-group { position: absolute; transition: transform 400ms ease; } .card-group[data-status="unknown"] { transform: scale(0); transition: none; } .card-group[data-status="active"] { transition-delay: 300ms; } .card-group[data-status="after"] { transform: translateX(50%) scale(0); } .card-group[data-status="before"] { transform: translateX(-50%) scale(0); } .card-group[data-status="becoming-active-from-after"] { transform: translateX(50%) scale(0); transition: none; } .card-group[data-status="becoming-active-from-before"] { transform: translateX(-50%) scale(0); transition: none; } .card { background-color: rgba(255, 255, 255, 0.05); position: absolute; transition: transform 800ms cubic-bezier(.05,.43,.25,.95); background-position: center; background-size: cover; } .big-card { border-radius: 1vmin; } .little-card { width: 12vmin; border-radius: 2vmin; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: -1vmin 1vmin 2vmin rgba(0, 0, 0, 0.25); pointer-events: none; } .big-card:nth-child(2) { background-image: url("//repo.bfw.wiki/bfwrepo/image/625a18cd69bb2.png"); transform: translateX(-10%) rotate(-1deg); } .big-card:nth-child(4) { background-image: url("//repo.bfw.wiki/bfwrepo/image/625a189cc1b7b.png"); transform: rotate(2deg); } .big-card:nth-child(6) { background-image: url("//repo.bfw.wiki/bfwrepo/image/625a18709b084.png"); transform: translateX(-6%) rotate(-3deg); } .big-card:nth-child(8) { background-image: url("//repo.bfw.wiki/bfwrepo/image/5e7d467b45154.png"); transform: translate(10%, 3%) rotate(5deg); } .card-group[data-index="1"] > .big-card:nth-child(6) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .card-group[data-index="1"] > .big-card:nth-child(8) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .card-group[data-index="2"] > .big-card:nth-child(4) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .card-group[data-index="2"] > .big-card:nth-child(8) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .little-card:nth-child(1) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .little-card:nth-child(3) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .little-card:nth-child(5) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .little-card:nth-child(7) { background-image: url("//repo.bfw.wiki/bfwrepo/image/61830aafa57f1.png"); } .card-group:hover > .card { box-shadow: -2vmin 2vmin 3vmin rgba(0, 0, 0, 0.4); } .card-group:hover > .big-card:nth-child(2) { transform: translate(-75%, 16%) rotate(-24deg); } .card-group:hover > .big-card:nth-child(4) { transform: translate(-25%, 8%) rotate(-8deg); } .card-group:hover > .big-card:nth-child(6) { transform: translate(25%, 8%) rotate(8deg); } .card-group:hover > .big-card:nth-child(8) { transform: translate(75%, 16%) rotate(24deg); } .card-group:hover > .little-card:nth-child(1) { transform: translate(200%, -160%) rotate(-15deg); } .card-group:hover > .little-card:nth-child(3) { transform: translate(160%, 170%) rotate(15deg); } .card-group:hover > .little-card:nth-child(5) { transform: translate(-200%, -170%) rotate(15deg); } .card-group:hover > .little-card:nth-child(7) { transform: translate(-280%, 140%) rotate(-15deg); } .card-swiper-buttons { margin-top: 8vmin; display: flex; justify-content: space-around; padding: 0vmin 4vmin; } .card-swiper-buttons > button { font-size: 2.5vmin; border: 0.4vmin solid rgb(200, 200, 200); border-radius: 100%; color: white; background-color: transparent; height: 7vmin; width: 7vmin; display: grid; place-items: center; cursor: pointer; } #love-button { color: rgb(33, 150, 243); border-color: rgb(33, 150, 243); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0