css实现页面顶部下拉显示内容效果代码-html代码-BFW代码库

css实现页面顶部下拉显示内容效果代码

代码语言：html

代码描述：css实现点击按钮页面整体下拉，顶部显示内容效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin:0;
          padding:0;
          font-family:"Helvetica Neue", Helvetica, Sans-serif;
          word-spacing:-2px;
        }
        
        h1 {
          font-size:40px;
          font-weight:bold;
          color:#191919;
          -webkit-font-smoothing: antialiased;
        }
        
        h2 {
          font-weight:normal;
          font-size:20px;
          color:#888;
          padding:5px 0;
        }
        
        .message {
        background:#181818;
        color:#FFF;
        position: absolute;
        top: -250px;
        left: 0;
        width: 100%;
        height: 250px;
        padding: 20px;
        transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
        overflow: hidden;
        box-sizing: border-box;
          
        }
        
        .message h1 {
          color:#FFF;
        }
        
        #toggle {
          position:absolute;
          appearance:none;
          cursor:pointer;
          left:-100%;
          top:-100%;
        }
        
        #toggle + label {
          position:absolute;
          cursor:pointer;
          padding:10px;
          background: #26ae90;
        width: 100px;
        border-radius: 3px;
        padding: 8px 10px;
        color: #FFF;
       .........完整代码请登录后点击上方下载按钮下载查看