css手风琴带标题描述幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:css手风琴带标题描述幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <style> body{margin:0;padding:0;list-style-type:none;} body { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; font-family: sans-serif; } .options { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px; margin:60px auto; } @media screen and (max-width: 718px) { .options { min-width: 520px; } .options .option:nth-child(5) { display: none; } } @media screen and (max-width: 638px) { .options { min-width: 440px; } .options .option:nth-child(4) { display: none; } } @media screen and (max-width: 558px) { .options { min-width: 360px; } .options .option:nth-child(3) { display: none; } } @media screen and (max-width: 478px) { .options { min-width: 280px; } .options .option:nth-child(2) { display: none; } } .options .option { position: relative; overflow: hidden; min-width: 60px; margin: 10px; background: var(--optionBackground, var(--defaultBackground, #E6E9ED)); background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .options .option:nth-child(1) { --defaultBackground: #ED5565; } .options .option:nth-child(2) { --defaultBackground: #FC6E51; } .options .option:nth-child(3) { --defaultBackground: #FFCE54; } .options .option:nth-child(4) { --defaultBackground: #2ECC71; } .options .option:nth-child(5) { --defaultBackground: #5D9CEC; } .options .option:nth-child(6) { --defaultBackground: #AC92EC; } .options .option.active { flex-grow: 10000; -webkit-transform: scale(1); transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; /*&:active { transform:scale(0.9); }*/ } .options .option.active .shadow { box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black; } .options .option.active .label { bottom: 20px; left: 20px; } .options .option.active .label .info>div { left: 0px; opacity: 1; } .options .option:not(.active) { flex-grow: 1; border-radius: 30px; } .options .option:not(.active) .shadow { bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black; } .options .option:not(.active) .label { bottom: 10px; left: 10px; } .options .option:not(.active) .label .info>div { left: 20px; opacity: 0; } .options .option .shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .options .option .label { display: flex; position: absolute; right: 0px; height: 40px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .options .option .label .icon { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 40px; max-width: 40px; height: 40px; border-radius: 100%; background-color: white; color: var(--defaultBackground); } .options .option .label .info { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; color: white; white-space: pre; } .options .option .label .info>div { position: relative; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out; } .options .option .label .info .main { font-weight: bold; font-size: 1.2rem; } .options .option .label .info .sub { transiti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0