js实现图文折叠卡片悬浮凸显效果代码
代码语言:html
所属分类:悬停
代码描述:js实现图文折叠卡片悬浮凸显效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic'> <style> @import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap'); body { margin: 0; padding: 0; background-color: #24262D; } * { box-sizing: border-box; font-family: 'Merriweather', serif; } :root { --sizeCreaBlock: 270px; --bgCreaBlock: #1e1f25; --blockTranslateX: 210px; --blockRotateY: 40deg; --marginSize: 32px; --shadowColor: 15px 5px 20px -7px rgb(0 0 0 / 30%); --blocImgSize: 200px; --arc-blue: rgba(53, 113, 158, 1); --arc-vert: #4caf50; --arc-jaune: #ffeb3b; --arc-rose: #E91E63; --arc-orange: #f76334; } .blocImg { width: 100%; height: var(--blocImgSize); position: relative; z-index: 9999; padding: 10px; } .blocImg > img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .blocImg > img::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #3a3e4c; } .creaBlock { width: var(--sizeCreaBlock); background-color: var(--bgCreaBlock); padding: 50px 20px 20px 20px; border-radius: 7px; position: relative; overflow: hidden; display: inline-block; white-space: normal; vertical-align: top; transition: all .3s; -webkit-box-shadow: var(--shadowColor); -moz-box-shadow: var(--shadowColor); box-shadow: var(--shadowColor); cursor: pointer; } .creaBlock:not(.creaBlockPrez):hover { transform: scale(1); } .creaBlock::after { content: ""; position: absolute; top: 50%; left: 10%; width: calc(var(--sizeCreaBlock) * 2); height: calc(var(--sizeCreaBlock) * 2); background-color: #353842; transform: rotateZ(70deg); z-index: -1; } .creaBlock > figcaption { position: absolute; left: 0; top: 0; right: 20%; font-weight: bold; color: white; padding: 25px; font-size: 16px; opacity: .8; text-align: left; } .creaBlock h2 { font-size: 20px; width: 70%; color: white; font-weight: bold; height: 54px; display: block; text-align: left; overflow: hidden; background-color: transparent; transition: var(--background-color) .6s; } .creaBlock img { width: 100%; height: 100%; border-radius: 10px; } /* FIN CREA BLOCK */ .creaBlock { transform: scale(.9); } .creaBlock .lineSeparator { background-color: #00bcd4; } /* BOX 1 */ .creaBlockPrez:nth-child(1) { z-index: 1; transform: scale(.9); } .creaBlockPrez:nth-child(1):hover { transform: scale(1.1); } .creaBlockPrez:nth-child(1):hover ~ .creaBlockPrez:nth-child(2) { transform: scale(.83) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } .creaBlockPrez:nth-child(1):hover ~ .creaBlockPrez:nth-child(3) { transform: scale(.88) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } .creaBlockPrez:nth-child(1):hover ~ .creaBlockPrez:nth-child(4) { transform: scale(.93) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } .creaBlockPrez:nth-child(1):hover ~ .creaBlockPrez:nth-child(5) { transform: scale(.98) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } /* BOX 2 */ .creaBlockPrez:nth-child(2) { z-index: 2; margin-left: calc(-6 * var(--marginSize)); transform: scale(.94); animation: displayCreations .5s linear .4s forwards; } .creaBlockPrez:nth-child(2):hover { transform: scale(1.1); } .creaBlockPrez:nth-child(2):hover ~ .creaBlockPrez:nth-child(3) { transform: scale(.88) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } .creaBlockPrez:nth-child(2):hover ~ .creaBlockPrez:nth-child(4) { transform: scale(.93) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } .creaBlockPrez:nth-child(2):hover ~ .creaBlockPrez:nth-child(5) { transform: scale(.98) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } /* BOX 3 */ .creaBlockPrez:nth-child(3) { z-index: 3; margin-left: calc(-6 * var(--marginSize)); transform: scale(.98); } .creaBlockPrez:nth-child(3):hover { transform: scale(1.1); } .creaBlockPrez:nth-child(3):hover ~ .creaBlockPrez:nth-child(4) { transform: scale(.93) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } .creaBlockPrez:nth-child(3):hover ~ .creaBlockPrez:nth-child(5) { transform: scale(.98) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } /* BOX 4 */ .creaBlockPrez:nth-child(4) { z-index: 4; margin-left: calc(-6 * var(--marginSize)); transform: scale(1.02); } .creaBlockPrez:nth-child(4):hover { transform: scale(1.1); } .creaBlockPrez:nth-child(4):hover ~ .creaBlockPrez:nth-child(5) { transform: scale(.98) translateX(var(--blockTranslateX)) rotateY(var(--blockRotateY)); } /* BOX 5 */ .creaBlockPrez:nth-child(5) { z-index: 5; margin-left: calc(-6 * var(--marginSize)); transform: sca.........完整代码请登录后点击上方下载按钮下载查看
网友评论0