二十多种折叠选项卡打开关闭效果代码
代码语言:html
所属分类:选项卡
代码描述:二十多种折叠选项卡打开关闭效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> [data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-between; } [data-css-icon] i { align-items: center; background-color: var(--bgc); border-radius: var(--bdrs); box-sizing: border-box; display: inline-flex; height: var(--size); justify-content: center; position: relative; transition: background-color var(--animdur) var(--animtf); width: var(--size); } [data-css-icon] i::after, [data-css-icon] i::before { transform-origin: 50% 50%; transition: all var(--animdur) var(--animtf); } [data-css-icon*="down"] i::after, [data-css-icon*="right"] i::after { background: transparent; border-color: var(--c); border-style: solid; box-sizing: border-box; content: ''; display: inline-block; height: var(--icon-size) ; margin: 0; position: relative; width: var(--icon-size); } [data-css-icon*="down"] i::after { border-width: 0 var(--bdw) var(--bdw) 0; top: calc(0px - (var(--icon-size) / 4)); transform: rotate(45deg); } [data-css-icon*="right"] i::after { border-width: var(--bdw) var(--bdw) 0 0; right: calc((var(--icon-size) / 4)); top: 0; transform: rotate(45deg); } [data-css-icon*="equals"] i::after, [data-css-icon*="equals"] i::before, [data-css-icon*="cross"] i::after, [data-css-icon*="cross"] i::before, [data-css-icon*="menu"] i, [data-css-icon*="menu"] i::after, [data-css-icon*="menu"] i::before, [data-css-icon*="plus"] i::after, [data-css-icon*="plus"] i::before { /* Width need to be the diagonal of the down-arrow side-length (--size): sqrt(2) * --size. */ --w: calc(var(--icon-size) * 1.4142135623730950488016887242097); background: var(--c); content: ''; height: var(--bdw); position: absolute; width: var(--w); } [data-css-icon*="cross"] i::before, [data-css-icon*="plus"] i::before { transform: rotate(90deg); } [data-css-icon*="equals"] i { --m: 4px; } [data-css-icon*="equals"] i::after { transform: translateY(var(--m)); } [data-css-icon*="equals"] i::before { transform: translateY(calc(0px - var(--m))); } [data-css-icon*="dots"], [data-css-icon*="menu"] { height: var(--size); } [data-css-icon*="menu"] i { --bdrs: 0; --m: 7px; position: relative; right: calc((var(--size) - var(--w)) / 2); } [data-css-icon*="menu"] i::after { top: var(--m); } [data-css-icon*="menu"] i::before { top: calc(0px - var(--m)); } [data-css-icon*="dots"] i, [data-css-icon*="dots"] i::after, [data-css-icon*="dots"] i::before { animation: dots var(--loading-animdur) infinite alternate; background-color: var(--c); border-radius: 50%; content: ""; display: inline-block; height: var(--dots-size); width: var(--dots-size); } [data-css-icon*="dots"] i { animation-delay: var(--loading-animdur); position: relative; right: calc((var(--size) - var(--dots-size)) / 4); } [data-css-icon*="dots"] i::after { animation-delay: 0s; left: calc(0px - (var(--dots-size) * 3)); position: absolute; } [data-css-icon*="dots"] i::before { animation-delay: calc(var(--loading-animdur) / 2); left: calc(0px - (var(--dots-size) * 1.5)); position: absolute; } [data-css-icon*="spin"] i::after { animation: spin var(--loading-animdur) infinite linear; border-radius: 50%; border: var(--bdw) solid var(--dots-bgc); border-left: var(--bdw) solid var(--c); content: ""; height: var(--icon-size); transform: translateZ(0); width: var(--icon-size); } /* STATE */ [open] > summary > [data-css-icon*="cross"] i::after { transform: rotate(45deg); } [open] > summary > [data-css-icon*="cross"] i::before { transform: rotate(135deg); } [open] > summary > [data-css-icon*="down"] i::after { top: var(--bdw); transform: rotate(45deg) scale(-1) ; } [open] > summary > [data-css-icon*="right"] i::after { right: 0; top: calc(0px - (var(--icon-size) / 4)); transform: rotate(135deg); } [open] > summary > [data-css-icon*="plus"] i::after { transform: rotate(180deg); } [open] > summary > [data-css-icon*="plus"] i::before { transform: rotate(-0deg); } [open] > summary > [data-css-icon*="equals"] i::after { transform: rotate(-45deg); } [open] > summary > [data-css-icon*="equals"] i::before { transform: rotate(45deg); } [open] > summary > [data-css-icon*="menu"] i { background-color: transparent; } [open] > summary > [data-css-icon*="menu"] i::after { transform: translateY(calc(0px - var(--m))) rotate(-45deg); } [open] > summary > [data-css-icon*="menu"] i::before { transform: translateY(var(--m)) rotate(45deg); } /* RTL: inset-block-end fails */ [dir="rtl"] [data-css-icon*="right"] i::after { left: calc((var(--icon-size) / 4)); } [dir="rtl"] [data-css-icon*="menu"] i { left: 0.5rem; right: auto; } /* MODIFIERS */ [data-css-icon*="outline"] i { border: var(--bdw) solid var(--c); } [data-css-icon*="fill"] { --bgc: hsl(195, 10%, 30%); --c: hsl(195, 10%, 95%); } [data-css-icon*="square"] { --bdrs: 5px; } /* For this demo only */ body { font-family: system-ui, sans-serif; padding: 1rem; } button, details { width: 25rem; } button { font-family: inherit; font-size: inherit; } details { height: var(--collapsed); overflow: hidden; transition: height 300ms cubic-bezier(0.4, 0.01, 0.165, 0.99); } details[open] { height: var(--expanded); } button, summary { background-color: var(--bgc); border: 0; border-radius: 5px; color: var(--c, inherit); list-style-type: none; margin: 0.5rem 0; outline: none; padding-bottom: 0.5rem; padding-top: 0.5rem; padding-inline-end: 0.5rem; padding-inline-start: 1rem; user-select: none; } summary::marker { display: none; } summary::-webkit-details-marker { display: none; } /* 4 States of summary */ button, summary { --bgc: hsl(195, 10%, 90%); } [open] > summary { --bgc: hsl(195, 10%, 20%); --c: hsl(195, 10%, 92%); } button:focus, summary:focus { --bgc: hsl(195, 10%, 75%); } [open] > summary:focus { --bgc: hsl(195, 10%, 10%); --c: hsl(195, 10%, 99%); } [open] > summary:focus > [data-css-icon*="fill"], [open] > summary > [data-css-icon*="fill"] { --bgc: hsl(195, 10%, 80%); --c: hsl(195, 10%, 10%); } summary + * { color: #777; line-height: 1.6; padding: 0.5rem; } @keyframes dots { 0% { background-color: var(--c); } 50%, 100% { background-color: var(--dots-bgc); } } @keyframes spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } </style> </head> <body translate="no" > <details> <summary> <span data-css-icon="down">Down To Up<i></i></span> </summary> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis. </div> </details> <details> <summary> <span data-css-icon="plus">Plus To Minus<i></i></span> </summary> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam commodi amet fuga dicta facilis! Sed ipsum unde cumque debitis omnis placeat non, ut magni dolores! </div> </details> <details> <summary> <span data-css-icon="right">Right To Down<i></i></span> </summary> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, quam. Ipsum deserunt veniam placeat iusto vel possimus omnis quo dolor distinctio fugit. Ex, impedit est?</div> </details> <details> <summary> <span data-css-icon="cross">Plus to Cross<i></i></span> </summary> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div> </details> <details> <summary> <span data-css-icon="equals">Equals to Cross<i></i></span> </summary> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div> </details> <details> <summary> <span data-css-icon="down outline">Down To Up: Outline<i></i></span> </summary> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis. </div> </details> <details> <summary> <span data-css-icon="plus outline">Plus To Minus: Outline<i></i></span> </summary> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam commodi amet fuga dicta facilis! Sed ipsum unde cumque debitis omnis placeat non, ut magni dolores! </div> </details> <details> <summary> <span data-css-icon="right outline">Right To Down: Outline<i></i></span> </summary> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, quam. Ipsum deserunt veniam placeat iusto vel possimus omnis quo dolor distinctio fugit. Ex, impedit est?</div> </details> <details> <summary> <span data-css-icon="cross outline">Plus to Cross: Outline<i></i></span> </summary> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div> </details> <details> <summary> <span data-css-icon="equals outline">Equals to Cross: Outline<i></i></span> </summary> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div> </details> <details> <summary> <span data-css-icon="down fill">Down To Up: Fill<i></i></span> </summary> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis. </div> </details> <details> <summary> <span data-css-icon="plus fill">Plus To Minus: Fill<i></i></span> </summary> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam commodi amet fuga dicta facilis! Sed ipsum unde cumque debitis omnis placeat non, ut magni dolores! </div> </details> <details> <summary> <span data-css-icon="right fill">Right To Down: Fill<i></i></span> </summary> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, quam. Ipsum deserunt veniam placeat iusto vel possimus omnis quo dolor distinctio fugit. Ex, impedit est?</div> </details> <details> <summary> <span data-css-icon="cross fill">Plus to Cross: Fill<i></i></span> </summary> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div> </details> <details> <summary> <span data-css-icon="equals fill">Equals to Cross: Fill<i></i></span> </summary> <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ab animi velit est unde, quod, debitis voluptas, tenetur possimus corporis veritatis commodi eveniet placeat officiis non! Et consequatur nulla molestiae?</div> </details> <details> <summary> <span data-css-icon="square down outline">Down To Up: Square Outline<i></i></span> </summary> <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis. </div> </details> <details> <summary> <span data-css-icon="square plus outline">Plus To Minus: Square Outline<i></i></span> </summary> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam commodi amet fuga dicta facilis! Sed ipsum unde cumque debitis omnis placeat non, ut magni dolores! </div> </details> <details> <summary> <span data-css-icon="square right outline">Right To Down: Square Outline<i></i></span> </summary> <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit, quam. Ipsum deserunt veniam placeat iusto vel possimus omnis quo dolor distinctio fugit. Ex, impedit est?</div> </details> <details> <summary> <span data-css-ic.........完整代码请登录后点击上方下载按钮下载查看
网友评论0