Home > Article > Web Front-end > Detailed examples of implementation of HTML and CSS dynamic background login pages

Detailed examples of implementation of HTML and CSS dynamic background login pages

小云云Original: 2017-12-19 11:07:415782browse

The login page has a background, which will greatly increase people's visual enjoyment. However, in addition to the static page, the login page also has a dynamic page login. This article mainly introduces the relevant information on HTML+CSS to realize the dynamic background login page. Friends in need can refer to it. Next, I hope it can help everyone.

1. Realize the dynamic transformation of the background image

First, add the image p in the body section of the HTML page. The code is as follows:

<body>
<p class="bgk">
<p class="bgk-image" style="background-image: url(&#39;${pageContext.request.contextPath}/img/1.jpg&#39;)"></p>
<p class="bgk-image" style="background-image: url(&#39;${pageContext.request.contextPath}/img/2.jpg&#39;)"></p>
<p class="bgk-image" style="background-image: url(&#39;${pageContext.request.contextPath}/img/3.jpg&#39;)"></p>
<p class="bgk-image" style="background-image: url(&#39;${pageContext.request.contextPath}/img/4.jpg&#39;)"></p>
</body>

Then perform CSS design on the image. If you want to size and position the image, the following code must be written first:

`.bgk {
margin: auto;
position: absolute;
width: 1366px;
height: 672px;
overflow: hidden;   /*溢出部分隐藏*/
}`

After the position is set ok, then set the image inside. In order to make the image large enough to cover the page, the code must have background-size: cover;

To achieve dynamic effects, then your css code must have animation design:

-webkit-animation-name: kenburns;       /*-animation-name:为@keyframes 动画规定名称,必须与-animation-duration同时使用，否则无动画效果*/
animation-name: kenburns;               /*或者：后面值为需要绑定到选择器上的keyframe名称*/
-webkit-animation-duration: 16s;    /*定义动画完成一个周期所需时间*/
animation-duration: 16s;
-webkit-animation-timing-function: linear;  /*规定动画从头到尾以相同速度播放，还有其他几个速度值*/
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;    /*规定动画播放次数，infinite为无限次*/
animation-iteration-count: infinite;
-webkit-transform: scale(1.2);      /*规定动画的缩放特效，scale：规定2D缩放*/
transform: scale(1.2);
-webkit-filter: blur(10px);       /*定义图片的模糊程度，显示为毛玻璃效果*/
filter: blur(10px);

In Bind each sub-element selector. If there are several pictures, bind several selectors:

.bgk-image:nth-child(1) {
-webkit-animation-name: kenburns-1;       /*选择器上的名称*/
animation-name: kenburns-1;
z-index: 3;         /*动画堆叠顺序，值越大表示越先播放，离用户越近*/
}
.bgk-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.bgk-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.bgk-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}

After creating the selector, you can preview your dynamic background image transformation

2. Design of the login form

Continue to add a form to the previous HTML page

<p class="form_login_p">
    <form  class="form_login" action="" method="post">
        <label class="login_title">登录您的账户</label>
        <label class="username">用户名</label><input class="input_username" id="input_username" type="text" name="username" placeholder="邮箱/手机号"/>
        <label class="password">密 码</label><input class="input_password" id="input_password" type="password" name="password" placeholder="请输入密码"/>
        <input type="submit" value="登录"/><br/>
    </form>
</p>

After adding the form, it is necessary to design the style of the form. First, you have to define a circle for the form and limit its width and height

.form_login{
    margin: auto;
    width:700px;
    height: 480px;
    top: 90px;
    left: 333px;
    position: absolute;
    border-radius: 15px;
    background: rgba(216,216,216,0.5);      /*设置form表单透明度*/
    text-align: center;
    overflow: hidden;
}

Then you need to position and style each label in the form. You can design it freely here.

For the design of the input box, I only post the main style code

outline:none;       /*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
border:1px solid rgba(0,0,0,.49);       /*输入框边框的大小，实线，rgba（red,green,blue,a为透明度）,透明度处于0-1之间*/
-webkit-background-clip: padding-box;   /*background-clip 规定背景的绘制区域,padding-box为内容被裁减到内边距框*/
background-clip: padding-box;
background:rgba(216,216,216,0.4) ;
border-radius:6px;      /*对输入框进行圆角*/
padding:7px;       /*输入框中光标位置*/

When focusing on the input box, you can add a little brilliant color

.form_login input[type="text"]:focus,input[type="password"]:focus{
    -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;     /*对边框颜色的逐步过渡高亮显示，后面是对阴影的逐步过渡*/
    border-color:rgba(255,128,0,.75);
}

Finally, the submit button Design

text-shadow:0px -1px 0px #5b6ddc;       /*文字阴影设置*/
outline:none;
border:1px solid rgba(0,0,0,0.49);       /*按钮边框颜色与透明度设置*/
-webkit-background-clip: padding-box;   /*规定内容的绘制区域，padding-box为内边框距*/
background-clip: padding-box;
border-radius:6px;
cursor:pointer;     /*光标形状，pointer为一只手的形状*/
background-color:#768ee4;       /*按钮背景颜色*/

When the mouse is placed on the submit button, you can appropriately design some animation effects

.form_login input[type="submit"]:hover{
    background-color:#5f73e9;
    background-image:-webkit-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
    background-image:-moz-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
    background-image:-ms-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
    background-image:-o-linear-gradient(bottom,#5f73e9 0%,#859bef 100%);
    -webkit-box-shadow: inset 0px 1px 0px #aab9f4;      /*当鼠标放在按钮上个时边框的阴影*/
    box-shadow: inset 0px 1px 0px #aab9f4;
    margin-top:22px;
}

Finally the entire design is completed and you can see your final effect

Related recommendations:

Based on CSS3 dynamic background login box code_html/css_WEB-ITnose

jQuery dynamic background image effect implementation method_jquery

A beautiful login page made with Html

The above is the detailed content of Detailed examples of implementation of HTML and CSS dynamic background login pages. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the difference between margin and padding in CSSNext article：Detailed explanation of the difference between margin and padding in CSS

See more

Detailed examples of implementation of HTML and CSS dynamic background login pages

Related articles