css+js实现图片折叠折纸悬浮显示图文效果代码
代码语言:html
所属分类:悬停
代码描述:css+js实现图片折叠折纸悬浮显示图文效果代码
代码标签: css js 图片 折叠 折纸 悬浮 显示 图文
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700"); html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Roboto, sans-serif; } @media screen and (max-width: 500px) { html, body { font-size: 0.8rem; } } @media screen and (max-height: 500px) { html, body { font-size: 0.8rem; } } body { display: flex; justify-content: center; align-items: center; background-color: #00080e; } * { box-sizing: border-box; } .wrapper { display: flex; width: 100%; max-width: 800px; height: 75%; max-height: 600px; perspective: 500px; transform-style: preserve-3d; transition: opacity 150ms ease-in-out; } .wrapper.loading { opacity: 0; } .destination { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: white; text-shadow: 0 0 6px #00080e; transition: all 150ms ease-out; } .destination h1 { font-size: 2.5em; text-align: center; } .destination hr { height: 1px; background-color: white; border: none; width: 50px; } .destination p { font-size: 1.2em; } .destination button { border: none; background-color: #b71c1c; font-family: inherit; color: white; font-size: 1em; padding: 0.5em 1em; margin-top: 1em; border-radius: 2em; cursor: pointer; } .destination button:hover { background-color: #d32f2f; } .destination img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; } .destination::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 100ms ease-in; mix-blend-mode: multiply; opacity: 0; pointer-events: none; } .destination.unfolded { flex: 8 1; } .destination.unfolded.front { transform: translateZ(20px); } .destination.unfolded.back { transform: translateZ(-20px); } .destination.unfolded.back::after { background: linear-gradient(to right, black 0%, white 25%, white 75%, black 100%); opacity: 0.5; } .destination.folded { flex: 1 8; } .destination.folded h1, .destination.folded hr, .destination.folded p, .destination.folded button { display: none; } .destination.folded::after { opacity: 0.6; } .destination.folded.right { transform: rotateY(-30deg) scaleX(1.16); } .destination.folded.right::after { background: linear-gradient(to left, white, black); } .destination.folded.left { transform: rotateY(30deg) scaleX(1.16); } .destination.folded.left::after { background: linear-gradient(to right, white, black); } </style> </head> <body> <!-- partial:index.partial.html --> <div class="wrapper loading"> <div class="destination folded"> <h1>Iceland</h1> <hr/> <p class="caption">Fire and ice</p> <button>Discover</button><img src="//repo.bfw.wiki/bfwrepo/image/643bc44535886.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90" alt="Beautiful Iceland" /> </div> <div class="destination folded"> <h1>Canada</h1> <hr/> <p class="caption">Genuine wilderness</p> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0