css 如何创建扩展部分HTML的功能箭头按钮

hivapdat 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(147)

我是一个完全的初学者网页设计，我想创建一个背景图像和标题部分，首先只有一小部分的图像应该显示（标题的高度，宽度是100%）和标题是主要焦点，然后我想有一个箭头按钮来扩展部分，例如，如果你想阅读隐藏的东西，图像应该只是在一个平滑的过渡扩展。
当我的意思是扩大，我的意思是，该节（与背景图像）应扩大其高度向下和宽度是100%，如前所述
下面是代码：
超文本标记语言

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>TITLE</title>
    </head>

<body>
    
    
        <div class="mainPic">
            <section>
            
                <header style="text-align: center;">
                    <h1>TITLE & info</h1>
                </header>

                <input type="checkbox" id="trigger"/>

                <label  class="bottom-arrow" for="trigger">
                    
                </label>

                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
            </section>
        </div>
    
    
</body>
</html>

CSS：

@charset "utf-8";

body{
    background-color: white;
}

.mainPic{
    
    background-image: url("images/background.webp");
    background-repeat: no-repeat;
    
    background-size: cover;
    
    border: 1px solid black;
}

h1{
    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    padding:0;
    margin:0;
    font-size: 75px;

    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
    
}

.bottom-arrow {
    border-bottom: 5px solid #6A0136;
}

.bottom-arrow:after {
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    cursor: pointer;
}

input{

    display: none;
}

.mainPic div{

    height: 0;
    overflow: hidden;
    opacity: 0;
}

input:checked ~ div{

    opacity: 1;
    height: auto;
}

css

来源：https://stackoverflow.com/questions/75302621/how-to-create-functional-arrow-button-that-extends-the-section-html

1条答案

按热度按时间

qqrboqgw1#

下面的代码只使用css进行悬停转换：

@charset "utf-8";

body{
    background-color: white;
}

.mainPic{
    
    background-image: url("images/background.webp");
    background-repeat: no-repeat;
    
    background-size: cover;
    
    border: 1px solid black;
}

h1{
    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 200;
    padding:0;
    margin:0;
    font-size: 75px;

    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
    
}

.bottom-arrow {
    border-bottom: 5px solid #6A0136;
}

.bottom-arrow:after {
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    cursor: pointer;
}

/*Custom CSS*/
section{position:relative;}

#hidden-content #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #fff;
}

#hidden-content:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

#hidden-content:hover .bottom-arrow:after{
  position:absolute;
  bottom:-25px;
  transition: 0.15s ease-out;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="main.css">
        <title>TITLE</title>
    </head>

<body>
    
    
      <div class="mainPic">
         <section>
            
           <header style="text-align: center;">
            <h1>TITLE & info</h1>
           </header>

           <div id="hidden-content">
              <label class="bottom-arrow" for="trigger"></label>
              <div id="list">
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
                <div>hidden text</div>
              </div>
           </div>
                  
          </section>
      </div>
    
    
</body>
</html>

我从一个previous post to adapt it to your example得到了启示

赞(0）回复(0）举报 2023-02-01

我来回答

css 如何创建扩展部分HTML的功能箭头按钮

1条答案

相关问题

热门标签

最新问答