html做一个左侧菜单栏_html + css 做一个简约唯美炫酷表单

87 阅读 0 评论 58 点赞

我是靠谱客的博主安详棒球，最近开发中收集的这篇文章主要介绍html做一个左侧菜单栏_html + css 做一个简约唯美炫酷表单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

查看效果：http://songothao.gitee.io/web_simple_beautiful_cool_form

源码下载：叁贰壹/WEB 简约唯美炫酷表单

简约唯美炫酷表单https://www.zhihu.com/video/1243887444052922368

html 代码：

<div class="form">
        <form action="">
            <h1>信息登记</h1>
            <div class="txtb">
                <label for="">姓名:</label>
                <input type="text" placeholder="请输入姓名"></div>
            <div class="txtb">
                <label for="">邮箱:</label>
                <input type="email" placeholder="请输入邮箱"></div>
            <div class="txtb">
                <label for="">手机:</label>
                <input type="text" placeholder="请输入手机号码">
            </div>
            <div class="txtb">
                <label for="">备注:</label>
                <textarea name="" id="" ></textarea>
            </div>
            <span class="btn">提交</span>
        </form>
</div>

在原来的基础上写的表单叁贰壹：纯 CSS 实现背景不停渐变效果

CSS 代码：

* {
    margin: 0;
    padding: 0;
}

/*渐变背景样式*/
body {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(125deg, #F44336, #E91E63, #9C27B0, #3F51B5, #2196F3);
    background-size: 400%;
    font-family: "montserrat";
    animation: bganimation 15s infinite;
}

@keyframes bganimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*表单样式*/
.form {
    width: 85%;
    max-width: 600px;
    /* max-height: 700px; */
    background-color: rgba(255, 255, 255, .05);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 5px #000;
    text-align: center;
    font-family: "微软雅黑";
    color: #fff;
}

/*表单标题样式*/
.form h1 {
    margin-top: 0;
    font-weight: 200;
}

.form .txtb {
    border: 1px solid #aaa;
    margin: 8px 0;
    padding: 12px 18px;
    border-radius: 10px;
}

.txtb label {
    display: block;
    text-align: left;
    color: #fff;
    font-size: 14px;
}

/*姓名 手机 邮箱 备注框样式*/
.txtb input,
.txtb textarea {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    margin-top: 6px;
    font-size: 18px;
    color: #fff;
}

/*备注框样式*/
.txtb textarea{
    max-height: 300px;
}

/*提交按钮样式*/
.btn {
    display: block;
    /* background-color: rgba(156, 39, 176, .5); */
    padding: 14px 0;
    color: #fff;
    cursor: pointer;
    margin-top: 8px;
    width: 100%;
    border: 1px solid #aaa;
    border-radius: 10px;
}