手风琴效果
代码语言:html
所属分类:选项卡
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D accordion (simple folding paper effect)</title> <link href='https://fonts.googleapis.com/css?family=IM+Fell+French+Canon' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> .screen .card .details-1, .screen .card .details-2 { background-color: white; position: relative; height: 70px; z-index: -10; transition: all 0.5s ease-in-out; display: flex; } html { background-color: #202B2E; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: "IM Fell French Canon"; } body { -webkit-perspective: 800px; perspective: 800px; } body * { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } p, h1 { margin: 0; font-weight: 700; } .screen { width: 400px; margin: 50px; padding-top: 120px; background: transparent; -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } .screen .card { margin: 0; height: 200px; transition: height 0.5s ease-in-out; } .screen .card:nth-of-type(1) .front-box { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://upload.wikimedia.org/wikipedia/commons/1/19/Brandt_Departure_from_Wilan%C3%B3w.jpg"); background-size: cover; } .screen .card:nth-of-type(2) .front-box { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Kawase_Z%C3%B4j%C3%B4ji.jpg/398px-Kawase_Z%C3%B4j%C3%B4ji.jpg"); background-size: cover; } .screen .card:nth-of-type(3) .front-box { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Albrecht_D%C3%BCrer_-_The_Large_Piece_of_Turf%2C_1503_-_Google_Art_Project.jpg/467px-Albrecht_D%C3%BCrer_-_The_Large_Piece_of_Turf%2C_1503_-_Google_Art_Project.jpg"); background-size: cover; } .screen .card:nth-of-type(4) .front-box { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://upload.wikimedia.org/wikipedia/commons/e/ed/Bellotto_Bridgettine_Church_and_Arsenal.jpg?1465410364618"); background-size: cover; } .screen .card .front-box { height: 200px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } .screen .card .front-box:hover { cursor: pointer; } .screen .card .front-box:hover h1 { border-bottom: 2px solid #D8303D; } .screen .card .front-box:hover p { opacity: 1; } .screen .card .front-box h1 { border-bottom: 2px solid transparent; padding-bottom: 5px; top: 55px; left: 20px; color: white; z-index: 20; transition: all 0.4s ease-in-out; } .screen .card .front-box p { color: white; font-style: italic; padding-top: 10px; font-weight: 400; opacity: 0; transition: all 0.5s ease-in-out 0.2s;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0