css实现竖状手风琴悬浮展开效果代码
代码语言:html
所属分类:悬停
代码描述:css实现竖状手风琴悬浮展开效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> ul { display: flex; flex-flow: row nowrap; list-style: none; padding: 2rem 2rem; gap: 1rem; overflow-x: scroll; box-sizing: border-box; } ul li { display: flex; flex-flow: column nowrap; justify-content: flex-end; position: relative; min-width: 5rem; min-height: 20rem; background-color: #1D365F; color: #FAC69B; border-radius: 10px; transition: min-width 0.5s; padding: 0 2rem 2rem 2rem; overflow: hidden; } ul li h2 { transform-origin: 60% 60%; transform: translate(-50%, -50%) rotate(-90deg); text-align: center; width: 26rem; margin: 2rem 0; transition: transform 0.5s; } ul li p, ul li a { transform-origin: 100% 50%; opacity: 0; width: 26rem; transition: opacity 0.5s, transform 0.5s; transform: translateY(1rem) rotate(-45deg); } ul li a { display: block; text-decoration: none; color: #ffffff; } ul li a:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } ul li:hover { min-width: 26rem; } ul li:hover h2 { transform: rotate(0); } ul li:hover p, ul li:hover a { opacity: 1; transform: none; } </style> </head> <body > <ul> <li> <h2>Resultat 01</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> <a href="#">Læs mere om resultat</a> </li> <li> <h2>Resultat 02</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> <a href="#">Læs mere om resultat</a> </li> <li> <h2>Resultat 03</h2> <p>Lorem ipsum dolor sit ame.........完整代码请登录后点击上方下载按钮下载查看
网友评论0