js+css实现炫酷图文卡片打开放大显示动画效果代码
代码语言:html
所属分类:图片放大
代码描述:js+css实现炫酷图文卡片打开放大显示动画效果代码,鼠标悬浮会显示数字动画。
代码标签: js css 炫酷 图文 卡片 打开 放大 显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #1f1f1f; font-family: "Open Sans", Helvetica, Arial, sans-serif; } .cont { position: relative; overflow: hidden; height: 100vh; padding: 80px 70px; } .cont__inner { position: relative; height: 100%; } .cont__inner:hover .el__bg:after { opacity: 1; } .el { position: absolute; left: 0; top: 0; width: 19.2%; height: 100%; background: #252525; transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s; will-change: transform, width, opacity; } .el:not(.s--active) { cursor: pointer; } .el__overflow { overflow: hidden; position: relative; height: 100%; } .el__inner { overflow: hidden; position: relative; height: 100%; transition: transform 1s; } .cont.s--inactive .el__inner { transform: translate3d(0, 100%, 0); } .el__bg { position: relative; width: calc(100vw - 140px); height: 100%; transition: transform 0.6s 0.7s; will-change: transform; } .el__bg:before { content: ""; position: absolute; left: 0; top: -5%; width: 100%; height: 110%; background-size: cover; background-position: center center; transition: transform 1s; transform: translate3d(0, 0, 0) scale(1); } .cont.s--inactive .el__bg:before { transform: translate3d(0, -100%, 0) scale(1.2); } .el.s--active .el__bg:before { transition: transform 0.8s; } .el__bg:after { content: ""; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.5s; } .cont.s--el-active .el__bg:after { transition: opacity 0.5s 1.4s; opacity: 1 !important; } .el__preview-cont { z-index: 2; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.3s 1.2s; } .cont.s--inactive .el__preview-cont { opacity: 0; transform: translateY(10px); } .cont.s--el-active .el__preview-cont { opacity: 0; transform: translateY(30px); transition: all 0.5s; } .el__heading { color: #fff; text-transform: uppercase; font-size: 18px; } .el__content { z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 30px; opacity: 0; pointer-events: none; transition: all 0.1s; } .el.s--active .el__content { z-index: 2; opacity: 1; pointer-events: auto; transition: all 0.5s 1.4s; } .el__text { text-transform: uppercase; font-size: 40px; color: #fff; } .el__close-btn { z-index: -1; position: absolute; right: 10px; top: 10px; width: 60px; height: 60px; opacity: 0; pointer-events: none; transition: all 0s 0.45s; cursor: pointer; } .el.s--active .el__close-btn { z-index: 5; opacity: 1; pointer-events: auto; transition: all 0s 1.4s; } .el__close-btn:before, .el__close-btn:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 8px; margin-top: -4px; background: #fff; opacity: 0; transition: opacity 0s; } .el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after { opacity: 1; } .el__close-btn:before { transform: rotate(45deg) translateX(100%); } .el.s--active .el__close-btn:before { transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57); transform: rotate(45deg) translateX(0); } .el__close-btn:after { transform: rotate(-45deg) translateX(100%); } .el.s--active .el__close-btn:after { transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57); transform: rotate(-45deg) translateX(0); } .el__index { overflow: hidden; position: absolute; left: 0; bottom: -80px; width: 100%; height: 100%; min-height: 250px; text-align: center; font-size: 20vw; line-height: 0.85; font-weight: bold; transition: transform 0.5s, opacity 0.3s 1.4s; transform: translate3d(0, 1vw, 0); } .el:hover .el__index { transform: translate3d(0, 0, 0); } .cont.s--el-active .el__index { transition: transform 0.5s, opacity 0.3s; opacity: 0; } .el__index-back, .el__index-front { position: absolute; left: 0; bottom: 0; width: 100%; } .el__index-back { color: #2f3840; opacity: 0; transition: opacity 0.25s 0.25s; } .el:hover .el__index-back { transition: opacity 0.25s; opacity: 1; } .el__index-overlay { overflow: hidden; position: relative; transform: translate3d(0, 100%, 0); transition: transform 0.5s 0.1s; color: transparent; } .el__index-overlay:before { content: attr(data-index); position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; color: #fff; transform: translate3d(0, -100%, 0); transition: transform 0.5s 0.1s; } .el:hover .el__index-overlay { transform: translate3d(0, 0, 0); } .el:hover .el__index-overlay:before { transform: translate3d(0, 0, 0); } .el:nth-child(1) { transform: translate3d(0%, 0, 0); transform-origin: 50% 50%; } .cont.s--el-active .el:nth-child(1):not(.s--active) { transform: scale(0.5) translate3d(0%, 0, 0); opacity: 0; transition: transform 0.95s, opacity 0.95s; } .el:nth-child(1) .el__inner { transition-delay: 0s; } .el:nth-child(1) .el__bg { transform: translate3d(0%, 0, 0); } .el:nth-child(1) .el__bg:before { transition-delay: 0s; background-image: url("//repo.bfw.wiki/bfwrepo/image/62c4c5974103a.png"); } .el:nth-child(2) { transform: translate3d(105.2083333333%, 0, 0); transform-origin: 155.2083333333% 50%; } .cont.s--el-active .el:nth-child(2):not(.s--active) { transform: scale(0.5) translate3d(105.2083333333%, 0, 0); opacity: 0; transition: transform 0.95s, opacity 0.95s; } .el:nth-child(2) .el__inner { transition-delay: 0.1s; } .el:nth-child(2) .el__bg { transform: translate3d(-19.2%, 0, 0); } .el:nth-child(2) .el__bg:before { transition-delay: 0.1s; background-image: url("//repo.bfw.wiki/bfwrepo/image/62c4c52192883.png"); } .el:nth-child(3) { transform: translate3d(210.4166666667%, 0, 0); transform-origin: 260.4166666667% 50%; } .cont.s--el-active .el:nth-child(3):not(.s--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0