网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css实现手风琴下拉菜单显示内容效果

2022/10/21 11:01:52

手风琴大家或许都见过,css实现的手风琴效果就不一定喽,今天我们就用css实现手风琴下拉菜单显示内容的效果,如下图所示:<html class=" -webkit-"><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" t…

        手风琴大家或许都见过,css实现的手风琴效果就不一定喽,今天我们就用css实现手风琴下拉菜单显示内容的效果,如下图所示:

2.gif


<html class=" -webkit-">
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>css实现手风琴下拉菜单显示内容效果</title>
  <style media="" data-href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    button,
    hr,
    input {
      overflow: visible
    }
    audio,
    canvas,
    progress,
    video {
      display: inline-block
    }
    progress,
    sub,
    sup {
      vertical-align: baseline
    }
    html {
      font-family: sans-serif;
      line-height: 1.15;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%
    }
    body {
      margin: 0
    }
    menu,
    article,
    aside,
    details,
    footer,
    header,
    nav,
    section {
      display: block
    }
    h1 {
      font-size: 2em;
      margin: .67em 0
    }
    figcaption,
    figure,
    main {
      display: block
    }
    figure {
      margin: 1em 40px
    }
    hr {
      box-sizing: content-box;
      height: 0
    }
    code,
    kbd,
    pre,
    samp {
      font-family: monospace, monospace;
      font-size: 1em
    }
    a {
      background-color: transparent;
      -webkit-text-decoration-skip: objects
    }
    a:active,
    a:hover {
      outline-width: 0
    }
    abbr[title] {
      border-bottom: none;
      text-decoration: underline;
      text-decoration: underline dotted
    }
    b,
    strong {
      font-weight: bolder
    }
    dfn {
      font-style: italic
    }
    mark {
      background-color: #ff0;
      color: #000
    }
    small {
      font-size: 80%
    }
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative
    }
    sub {
      bottom: -.25em
    }
    sup {
      top: -.5em
    }
    audio:not([controls]) {
      display: none;
      height: 0
    }
    img {
      border-style: none
    }
    svg:not(:root) {
      overflow: hidden
    }
    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: sans-serif;
      font-size: 100%;
      line-height: 1.15;
      margin: 0
    }
    button,
    input {}
    button,
    select {
      text-transform: none
    }
    [type=submit],
    [type=reset],
    button,
    html [type=button] {
      -webkit-appearance: button
    }
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner,
    button::-moz-focus-inner {
      border-style: none;
      padding: 0
    }
    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring,
    button:-moz-focusring {
      outline: ButtonText dotted 1px
    }
    fieldset {
      border: 1px solid silver;
      margin: 0 2px;
      padding: .35em .625em .75em
    }
    legend {
      box-sizing: border-box;
      color: inherit;
      display: table;
      max-width: 100%;
      padding: 0;
      white-space: normal
    }
    progress {}
    textarea {
      overflow: auto
    }
    [type=checkbox],
    [type=radio] {
      box-sizing: border-box;
      padding: 0
    }
    [type=number]::-webkit-inner-spin-button,
    [type=number]::-webkit-outer-spin-button {
      height: auto
    }
    [type=search] {
      -webkit-appearance: textfield;
      outline-offset: -2px
    }
    [type=search]::-webkit-search-cancel-button,
    [type=search]::-webkit-search-decoration {
      -webkit-appearance: none
    }
    ::-webkit-file-upload-button {
      -webkit-appearance: button;
      font: inherit
    }
    summary {
      display: list-item
    }
    [hidden],
    template {
      display: none
    }
    /*# sourceMappingURL=normalize.min.css.map */
  </style>
  <style media="" data-href="https://fonts.googleapis.com/css?family=Titillium+Web:300,700,300italic">
    /* latin-ext */
    @font-face {
      font-family: 'Titillium Web';
      font-style: italic;
      font-weight: 300;
      src: url(https://fonts.gstatic.com/s/titilliumweb/v15/NaPFcZTIAOhVxoMyOr9n_E7fdMbepI5Db5yciWM.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Titillium Web';
      font-style: italic;
      font-weight: 300;
      src: url(https://fonts.gstatic.com/s/titilliumweb/v15/NaPFcZTIAOhVxoMyOr9n_E7fdMbepI5DYZyc.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Titillium Web';
      font-style: normal;
      font-weight: 300;
      src: url(https://fonts.gstatic.com/s/titilliumweb/v15/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGIVzY4SY.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Titillium Web';
      font-style: normal;
      font-weight: 300;
      src: url(https://fonts.gstatic.com/s/titilliumweb/v15/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGItzYw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Titillium Web';
      font-style: normal;
      font-weight: 700;
      src: url(https://fonts.gstatic.com/s/titilliumweb/v15/NaPDcZTIAOhVxoMyOr9n_E7ffHjDGIVzY4SY.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Titillium Web';
      font-style: normal;
      font-weight: 700;
      src: url(https://fonts.gstatic.com/s/titilliumweb/v15/NaPDcZTIAOhVxoMyOr9n_E7ffHjDGItzYw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  </style>
  <style>
    .transition,
    ul li i:before,
    ul li i:after,
    p {
      transition: all 0.25s ease-in-out;
    }
    .flipIn,
    ul li,
    h1 {
      animation: flipdown 0.5s ease both;
    }
    .no-select,
    h2 {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    html {
      width: 100%;
      height: 100%;
      perspective: 900;
      overflow-y: scroll;
      background-color: #dce7eb;
      font-family: "Titillium Web", sans-serif;
      color: rgba(48, 69, 92, 0.8);
    }
    body {
      min-height: 0;
      display: inline-block;
      position: relative;
      left: 50%;
      margin: 90px 0;
      transform: translate(-50%, 0);
      box-shadow: 0 10px 0 0 #ff6873 inset;
      background-color: #fefffa;
      max-width: 450px;
      padding: 30px;
    }
    @media (max-width: 550px) {
      body {
        box-sizing: border-box;
        transform: translate(0, 0);
        max-width: 100%;
        min-height: 100%;
        margin: 0;
        left: 0;
      }
    }
    h1,
    h2 {
      color: #ff6873;
    }
    h1 {
      text-transform: uppercase;
      font-size: 36px;
      line-height: 42px;
      letter-spacing: 3px;
      font-weight: 100;
    }
    h2 {
      font-size: 26px;
      line-height: 34px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      background-color: #fefffa;
      margin: 0;
      cursor: pointer;
    }
    p {
      color: rgba(48, 69, 92, 0.8);
      font-size: 17px;
      line-height: 26px;
      letter-spacing: 1px;
      position: relative;
      overflow: hidden;
      max-height: 800px;
      opacity: 1;
      transform: translate(0, 0);
      margin-top: 14px;
      z-index: 2;
    }
    ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
    }
    ul li {
      position: relative;
      padding: 0;
      margin: 0;
      padding-bottom: 4px;
      padding-top: 18px;
      border-top: 1px dotted #dce7eb;
    }
    ul li:nth-of-type(1) {
      animation-delay: 0.5s;
    }
    ul li:nth-of-type(2) {
      animation-delay: 0.75s;
    }
    ul li:nth-of-type(3) {
      animation-delay: 1s;
    }
    ul li:last-of-type {
      padding-bottom: 0;
    }
    ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      right: 0;
    }
    ul li i:before,
    ul li i:after {
      content: "";
      position: absolute;
      background-color: #ff6873;
      width: 3px;
      height: 9px;
    }
    ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
    }
    ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
    }
    ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
    }
    ul li input[type=checkbox]:checked~p {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
    }
    ul li input[type=checkbox]:checked~i:before {
      transform: translate(2px, 0) rotate(45deg);
    }
    ul li input[type=checkbox]:checked~i:after {
      transform: translate(-2px, 0) rotate(-45deg);
    }
    @keyframes flipdown {
      0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
      }
      5% {
        opacity: 1;
      }
      80% {
        transform: rotateX(8deg);
      }
      83% {
        transform: rotateX(6deg);
      }
      92% {
        transform: rotateX(-3deg);
      }
      100% {
        transform-origin: top center;
        transform: rotateX(0deg);
      }
    }
  </style>
  <script>
    window.console = window.console || function (t) { };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>
<body translate="no">
  <h1>CSS + HTML only Accordion Element</h1>
  <ul>
    <li>
      <input type="checkbox" checked="">
      <i></i>
      <h2>Languages Used</h2>
      <p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and
        -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but
        someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML
        and CSS.</p>
    </li>
    <li>
      <input type="checkbox" checked="">
      <i></i>
      <h2>How it Works</h2>
      <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked
        state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion
        element. Media queries are used to make the element responsive to different screen sizes.</p>
    </li>
    <li>
      <input type="checkbox" checked="">
      <i></i>
      <h2>Points of Interest</h2>
      <p>By making the open state default for when :checked isn't detected, we can make this system accessable for
        browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be
        manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
    </li>
  </ul>
  <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div></div>
    <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;"></a>
  </div>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css如何实现手风琴下拉菜单显示内容的效果?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01