Skrollr.js 原质化设计风格的页头

Material Design Header Panel

header

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2357
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    background: #fafafa;
    color: #1BBBFB;
    font-family: sans-serif;
}
#page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#toolbar {
    display: block;
    position: fixed;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #1BBBFB;
    padding: 0 16px;
}
#actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 64px;
    top: 0;
    left: 0;
    right 0;
}
#actions .icon {
    padding: 7px;
    margin: 2px;
    vertical-align: middle;
}
#actions .spacer {
    flex: 1;
}
#actions svg {
    display: inline-block;
    pointer-events: none;
    position: relative;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    fill: #fff;
}
#title {
    padding: 21px;
    position: absolute;
    bottom: 0;
    color: #fff;
}
#content {
    display: block;
    position: relative;
    padding: 24px;
}
.card {
    display: block;
    position: relative;
    width: 60%;
    height: 100px;
    border: 1px solid #1BBBFB;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    margin: 16px auto;
    padding: 24px;
}

HTML

<div id="page">
    <div id="toolbar" data-0="height:192px" data-128="height: 64px">
        <div id="actions">
            <div class="icon">
                <svg viewBox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <g id="menu">
                        <path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path>
                    </g>
                </svg>
            </div>
            <div class="spacer"></div>
            <div class="icon">
                <svg viewBox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <g id="search">
                        <path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z"></path>
                    </g>
                </svg>
            </div>
            <div class="icon">
                <svg viewBox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
                    <g id="more-vert">
                        <path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">
            Techbrood Wow
        </div>
    </div>
    <div id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;">
        <div class="card">
            Content goes here!
        </div>
        <div class="card">
            Content goes here!
        </div>
        <div class="card">
            Content goes here!
        </div>
        <div class="card">
            Content goes here!
        </div>
        <div class="card">
            Content goes here!
        </div>
        <div class="card">
            Content goes here!
        </div>
        <div class="card">
            Content goes here!
        </div>
    </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js'></script>

Material Design Header Panel

header

编辑器支持Emmet

快捷键

Material Design Header Panel

header

使用HTML5/SVG实现不规则锯齿边波动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：