div+css实现折叠文字卡片面板代码-html代码-BFW代码库

div+css实现折叠文字卡片面板代码

代码语言：html

代码描述：div+css实现折叠文字卡片面板代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/theme.light.switch.min.css" layer(demo.theme);
@import "https://unpkg.com/open-props/theme.dark.switch.min.css" layer(demo.theme);

.nice-details {
  inline-size: 100%;
  --_duration: .2s;

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;

    &::details-content {
      transition: content-visibility var(--_duration) allow-discrete,
                  opacity var(--_duration),
                  block-size var(--_duration),
                  border-radius var(--_duration);
    }

    > summary {
      transition: 
        outline-offset .2s var(--ease-3),
        border-radius .2s var.........完整代码请登录后点击上方下载按钮下载查看