1. Enabling dynamic transformation of background images
First in the HTML page body plate, add the picture p, the code is as follows:
<body><p class= "Bgk" ><p class= "Bgk-image" style= "Background-image:url (' ${ Pagecontext.request.contextpath}/img/1.jpg ') "></p><p class=" Bgk-image "style=" Background-image:url (' ${pagecontext.request.contextpath}/img/2.jpg ') "></p><p class=" Bgk-image "style=" Background-image:url (' ${pagecontext.request.contextpath}/img/3.jpg ') "></p><p class=" Bgk-image "style=" Background-image: URL (' ${pagecontext.request.contextpath}/img/4.jpg ') ' ></p></body>Then the CSS design of the picture. You want to size the image, then the following code must be written first:
'. bgk {margin:auto;position:absolute;width:1366px;height:672px;overflow:hidden; /* Overflow partially hidden */} 'After setting the location OK, then set the picture inside. In order to make the picture large enough to cover the page, the code must have background-size:cover;
To achieve dynamic effects, you must have an animated design in your CSS code:
-webkit-animation-name:kenburns; /*-animation-name: For @keyframes animation specified name, must be used in conjunction with-animation-duration, otherwise no animation effect */animation-name:kenburns; /* OR: The following value is the keyframe name */-webkit-animation-duration:16s that needs to be bound to the selector; /* Define the time required for the animation to complete a cycle */animation-duration:16s;-webkit-animation-timing-function:linear; /* Specifies that the animation play at the same speed from beginning to end, and several other speed values */animation-timing-function:linear;-webkit-animation-iteration-count:infinite; /* Specifies the number of animation plays, Infinite for unlimited */animation-iteration-count:infinite;-webkit-transform:scale (1.2); /* Specify the Zoom effect of the animation, scale: Specify 2D scaling */transform:scale (1.2);-webkit-filter:blur (10px); /* Defines the degree of blur of the image, shown as the frosted glass effect */filter:blur (10px);
In binding each child element selector, there are several pictures that bind a few selectors:
. Bgk-image:nth-child (1) {-webkit-animation-name:kenburns-1; /* Name on the selector */animation-name:kenburns-1;z-index:3; /* Animation stacking order, the greater the value of the first play, the closer to the user */}.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;}Once you've created a selector, you'll be able to preview your animated background image transformation.
2. Design of the login form
Continue to add a form in the previous HTML page
<p class= "Form_login_p" > <form class= "Form_login" action= "method=" POST "> <label Class = "Login_title" > Login to your account </label> <label class= "username" > User name </label><input class= "input _username "id=" Input_username "type=" text "name=" username "placeholder=" Mailbox/Mobile number "/> <label class=" Password " > Secret code </label><input class= "Input_password" id= "Input_password" type= "password" name= "password" placeholder= "Please enter password"/> <input type= "Submit" value= "Login"/><br/> </form></p>
When you have finished adding the form, you will design the form in style. First you have to set a circle on the form, limiting 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); /* Set Form form transparency */ text-align:center; Overflow:hidden;}The labels are then positioned and styled for each label in the form, which can be designed freely.
For the design of the input box, I only post the main style code
Outline:none; A/*outline (contour) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as an element of prominence. */border:1px solid Rgba (0,0,0,.49); /* The size of the border of the input box, solid line, RGBA (red,green,blue,a for transparency), transparency is between 0-1 */-webkit-background-clip:padding-box; /*BACKGROUND-CLIP Specifies the background of the drawing area, Padding-box for the content is trimmed to the inner margin box */background-clip:padding-box;background:rgba (216,216,216,0.4 ); border-radius:6px; /* Fillet the input box */padding:7px; /* cursor position in the input box */
When you focus on the input box, you can add a bit of fancy color
. Form_login input[type= "text"]:focus,input[type= "password"]:focus{ -webkit-transition:border linear. 2s,- Webkit-box-shadow linear. 5s; /* A gradual transition to the border color is highlighted, followed by a gradual transition to the shadow * /Border-color:rgba (255,128,0,.75);}Design of the last commit button
text-shadow:0px-1px 0px #5b6ddc; /* Text shadow Settings */outline:none;border:1px solid Rgba (0,0,0,0.49); /* button border color and transparency settings */-webkit-background-clip:padding-box; /* The drawing area of the specified content, Padding-box is the inner border distance */background-clip:padding-box;border-radius:6px;cursor:pointer; /* cursor shape, pointer for the shape of one hand */background-color: #768ee4; /* Button Background color */
When the mouse is placed above the Submit button, you can design some animation effects appropriately
. 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; /* The shadow of the border when the mouse is placed over the button */ box-shadow:inset 0px 1px 0px #aab9f4; margin-top:22px;}At the end of the entire design, you can see your final effect.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
