Bootstrap 覆盖层动效的表单元素

Bootstrap's animated and overlayed form elements

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.form-control {
    display: block;
    width: 100%;
    height: 50px;
    font-size: 14px;
    color: #262732;
    background-color: transparent;
    background-image: none;
    border: 1px solid #66b0cb;
    border-radius: 3px;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
textarea {
    max-width: 100%;
}
label {
    margin-bottom: 0;
    font-weight: 700;
    color: #7bcc70;
    text-align: center;
    display: block;
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 11px;
}
.form-control {
    text-align: center;
    font-size: 16px;
    z-index: 1;
    position: relative;
    border-width: 2px;
}
.form-control,
.form-control:focus {
    box-shadow: none;
}
.form-group {
    position: relative;
}
.form-group label,
.form-group .form-control {
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
}
.form-group label {
    position: relative;
    -webkit-transition-property: -webkit-transform, color;
    -moz-transition-property: -moz-transform, color;
    transition-property: transform, color;
}
.form-group .form-control {
    -webkit-transition-property: border-width, background-color;
    -moz-transition-property: border-width, background-color;
    transition-property: border-width, background-color;
}
.form-group.-active .form-control,
.form-group.-focus .form-control {
    border-width: 1px;
    background-color: white;
}
.form-group.-animated {
    padding-top: 30px;
}
.form-group.-animated label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    margin-bottom: 0;
    color: #66b0cb;
    -webkit-transform: translateY(45.5px);
    -moz-transform: translateY(45.5px);
    -ms-transform: translateY(45.5px);
    -o-transform: translateY(45.5px);
    transform: translateY(45.5px);
}
.form-group.-animated.-active label,
.form-group.-animated.-focus label {
    color: #7bcc70;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.form-group.-overlayed:before {
    content: "";
    position: fixed;
    background-color: black;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease;
}
.form-group.-overlayed.-focus:before {
    z-index: 1050;
}
.form-group.-overlayed.-focus:before {
    visibility: visible;
    opacity: 0.5;
}
.form-group.-overlayed.-focus label,
.form-group.-overlayed.-focus .form-control {
    z-index: 1051;
}
.form-caption {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-repeat: no-repeat;
    color: white;
    max-width: 410px;
    font-size: 12px;
    font-style: italic;
}
.form-caption,
.form-caption.-topLeft,
.form-caption.-leftTop,
.form-caption.-topRight,
.form-caption.-rightTop {
    top: 49px;
    bottom: auto;
    padding-bottom: 41px;
    padding-top: 0;
    background-position: center bottom;
}
.form-caption.-bottomRight,
.form-caption.-rightBottom,
.form-caption.-bottomLeft,
.form-caption.-leftBottom {
    bottom: 11px;
    top: auto;
    padding-top: 41px;
    padding-bottom: 0;
    background-position: center top;
}
.form-caption,
.form-caption.-topLeft,
.form-caption.-leftTop,
.form-caption.-bottomLeft,
.form-caption.-leftBottom {
    left: -30px;
    right: auto;
}
.form-caption.-topRight,
.form-caption.-rightTop,
.form-caption.-bottomRight,
.form-caption.-rightBottom {
    right: -30px;
    left: auto;
}
.form-caption,
.form-caption.-topLeft,
.form-caption.-leftTop {
    -webkit-transform: translateX(-50%) translateY(-100%);
    -moz-transform: translateX(-50%) translateY(-100%);
    -ms-transform: translateX(-50%) translateY(-100%);
    -o-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
}
.form-caption.-topRight,
.form-caption.-rightTop {
    -webkit-transform: translateX(50%) translateY(-100%);
    -moz-transform: translateX(50%) translateY(-100%);
    -ms-transform: translateX(50%) translateY(-100%);
    -o-transform: translateX(50%) translateY(-100%);
    transform: translateX(50%) translateY(-100%);
}
.form-caption.-bottomRight,
.form-caption.-rightBottom {
    -webkit-transform: translateX(50%) translateY(100%);
    -moz-transform: translateX(50%) translateY(100%);
    -ms-transform: translateX(50%) translateY(100%);
    -o-transform: translateX(50%) translateY(100%);
    transform: translateX(50%) translateY(100%);
}
.form-caption.-bottomLeft,
.form-caption.-leftBottom {
    -webkit-transform: translateX(-50%) translateY(100%);
    -moz-transform: translateX(-50%) translateY(100%);
    -ms-transform: translateX(-50%) translateY(100%);
    -o-transform: translateX(-50%) translateY(100%);
    transform: translateX(-50%) translateY(100%);
}
@media (max-width: 991px) {
    .form-caption,
    .form-caption.-touchTop,
    .form-caption.-touchBottom,
    .form-caption.-topLeft,
    .form-caption.-topLeft.-touchTop,
    .form-caption.-topLeft.-touchBottom,
    .form-caption.-leftTop,
    .form-caption.-leftTop.-touchTop,
    .form-caption.-leftTop.-touchBottom,
    .form-caption.-topRight,
    .form-caption.-topRight.-touchTop,
    .form-caption.-topRight.-touchBottom,
    .form-caption.-rightTop .form-caption.-bottomRight,
    .form-caption.-rightTop .form-caption.-bottomRight.-touchTop,
    .form-caption.-rightTop .form-caption.-bottomRight.-touchBottom,
    .form-caption.-rightBottom,
    .form-caption.-rightBottom.-touchTop,
    .form-caption.-rightBottom.-touchBottom,
    .form-caption.-bottomLeft,
    .form-caption.-bottomLeft.-touchTop,
    .form-caption.-bottomLeft.-touchBottom,
    .form-caption.-leftBottom,
    .form-caption.-leftBottom.-touchTop,
    .form-caption.-leftBottom.-touchBottom {
        left: 50%;
        right: auto;
    }
    .form-caption,
    .form-caption.-touchTop,
    .form-caption.-topLeft,
    .form-caption.-topLeft.-touchTop,
    .form-caption.-leftTop,
    .form-caption.-leftTop.-touchTop,
    .form-caption.-topRight,
    .form-caption.-topRight.-touchTop,
    .form-caption.-rightTop .form-caption.-bottomRight,
    .form-caption.-rightTop .form-caption.-bottomRight.-touchTop,
    .form-caption.-rightBottom,
    .form-caption.-rightBottom.-touchTop,
    .form-caption.-bottomLeft,
    .form-caption.-bottomLeft.-touchTop,
    .form-caption.-leftBottom,
    .form-caption.-leftBottom.-touchTop {
        top: -19px;
        bottom: auto;
        padding-bottom: 41px;
        padding-top: 0;
        -webkit-transform: translateX(-50%) translateY(-100%);
        -moz-transform: translateX(-50%) translateY(-100%);
        -ms-transform: translateX(-50%) translateY(-100%);
        -o-transform: translateX(-50%) translateY(-100%);
        transform: translateX(-50%) translateY(-100%);
        background-position: center bottom;
    }
    .form-caption.-touchBottom,
    .form-caption.-topLeft.-touchBottom,
    .form-caption.-leftTop.-touchBottom,
    .form-caption.-topRight.-touchBottom,
    .form-caption.-rightTop .form-caption.-bottomRight.-touchBottom,
    .form-caption.-rightBottom.-touchBottom,
    .form-caption.-bottomLeft.-touchBottom,
    .form-caption.-leftBottom.-touchBottom {
        bottom: -19px;
        top: auto;
        padding-bottom: 0;
        padding-top: 41px;
        -webkit-transform: translateX(-50%) translateY(100%);
        -moz-transform: translateX(-50%) translateY(100%);
        -ms-transform: translateX(-50%) translateY(100%);
        -o-transform: translateX(-50%) translateY(100%);
        transform: translateX(-50%) translateY(100%);
        background-position: center top;
    }
}
.form-group.-focus .form-caption {
    opacity: 1;
    visibility: visible;
    z-index: 1050;
}
.panel-footer pre {
    padding: 0;
    border-width: 0;
    margin-bottom: 0;
}
.panel-footer pre + pre {
    margin-top: 20px;
}
.showcase {
    margin-bottom: 60px;
}
.showcase .form-group {
    margin-bottom: 0;
}
.showcase .form-group + .form-group {
    margin-top: 50px;
}

HTML

<p>
        The base about form elements the structure still the bootstrap structure, with a <code>.form-group</code> composed of a <code>label</code> and a <code>input.form-control</code>.
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group">
                <label for="#form-control-1">Example 1</label>
                <input class="form-control" id="form-control-1" type="text">
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group"&gt;<br>    &lt;label&gt;Example 1&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>

<p>
        For using the animated version, just add the variant class <code>.-animated</code> on the <code>.form-group</code> element
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group -animated">
                <label for="#form-control-2">Example 2</label>
                <input class="form-control" id="form-control-2" type="text">
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group -animated"&gt;<br>    &lt;label&gt;Example 2&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>

<p>
        To put an global overlay on the focus of the <code>.form-control</code>, use the variant class <code>.-overlayed</code>.
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group -overlayed">
                <label for="#form-control-3">Example 3</label>
                <input class="form-control" id="form-control-3" type="text">
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group -overlayed"&gt;<br>    &lt;label&gt;Example 3&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>

<p>
        You can of course use <code>.-animated</code> and <code>.-overlayed</code> on the same element
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group -animated -overlayed">
                <label for="#form-control-4">Example 4</label>
                <input class="form-control" id="form-control-4" type="text">
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;label&gt;Example 4&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>

<p>
        If you need to you can add a form-caption that will appear when the input is focused. You need to add a third element into the <code>.form-group</code> with the class code{.form-caption} and then whatever you want into.
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group -animated -overlayed">
                <div class="form-caption">Lorem ipsum</div>
                <label for="#form-control-5">Example 5</label>
                <input class="form-control" id="form-control-5" type="text">
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;div class="form-caption"&gt;lorem ipsum&lt;/div&gt;<br>    &lt;label&gt;Example 5&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>

<p>
        You can choose the position of the form-caption (the 4 corner) with the variant classes <code>.-topLeft</code>, <code>.-topRight</code>, <code>.-bottomRight</code>, <code>.-bottomLeft</code>. For Mobile and Tablet (xs and sm viewport), you have
        the choice between 2 position top or bottom with the respective classes <code>-touchTop</code> and <code>-touchBottom</code>
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group -animated -overlayed">
                <div class="form-caption -topLeft -touchTop">Lorem ipsum</div>
                <label for="#form-control-61">Example 6.1</label>
                <input class="form-control" id="form-control-61" type="text">
            </div>

<div class="form-group -animated -overlayed">
                <div class="form-caption -topRight -touchBottom">Lorem ipsum</div>
                <label for="#form-control-62">Example 6.2</label>
                <input class="form-control" id="form-control-62" type="text">
            </div>

<div class="form-group -animated -overlayed">
                <div class="form-caption -bottomRight -touchTop">Lorem ipsum</div>
                <label for="#form-control-63">Example 6.3</label>
                <input class="form-control" id="form-control-63" type="text">
            </div>

<div class="form-group -animated -overlayed">
                <div class="form-caption -bottomLeft -touchBottom">Lorem ipsum</div>
                <label for="#form-control-64">Example 6.4</label>
                <input class="form-control" id="form-control-64" type="text">
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;div class="form-caption -topLeft"&gt;lorem ipsum&lt;/div&gt;<br>    &lt;label&gt;Example 6.1&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>

<pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;div class="form-caption -topRight"&gt;lorem ipsum&lt;/div&gt;<br>    &lt;label&gt;Example 6.2&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>

<pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;div class="form-caption -bottomRight"&gt;lorem ipsum&lt;/div&gt;<br>    &lt;label&gt;Example 6.3&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>

<pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;div class="form-caption -bottomLeft"&gt;lorem ipsum&lt;/div&gt;<br>    &lt;label&gt;Example 6.4&lt;/label&gt;<br>    &lt;input class="form-control" type="text"&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>

<p>
        Works with textarea too !
    </p>

<div class="panel panel-default showcase">
        <div class="panel-body">
            <div class="form-group -animated -overlayed">
                <div class="form-caption">Lorem ipsum</div>
                <label for="#form-control-7">Example 7</label>
                <textarea class="form-control" id="form-control-7" cols="30" rows="10"></textarea>
            </div>
        </div>

<div class="panel-footer">
            <pre>&lt;div class="form-group -animated -overlayed"&gt;<br>    &lt;div class="form-caption"&gt;lorem ipsum&lt;/div&gt;<br>    &lt;label&gt;Example 7&lt;/label&gt;<br>    &lt;textarea class="form-control" cols="30" rows="10"&gt;&lt;/textarea&gt;<br>&lt;/div&gt;</pre>
        </div>
    </div>
</div>

Bootstrap's animated and overlayed form elements

编辑器支持Emmet

快捷键

Bootstrap's animated and overlayed form elements

HTML5 Audio+Matter.js 随音乐节奏而动的踩单车杂技表演

Mapbox.js + Leaflet.label.js 地图及标签覆盖层

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：