The code that is implemented.
HTML code:
The
code is as follows:
<div class= ' B ' >
</div>
<div class= ' BB ' >
</div>
<button id= ' Go ' >
Go
</button>
<div class= ' message ' >
<div class= ' Check ' >
✔
</div>
<p>
Success
</p>
<p>
Check your email for a booking confirmation. We'll be there for you soon!
</p>
<button id= ' OK ' >
OK
</button>
</div>
<script src= ' jquery.js ' ></script>
<script>
$ (' #go '). Click (function () {
Go (50);
});
$ (' #ok '). Click (function () {
Go (500);
});
settimeout (function () {
Go (50);
}, 700);
settimeout (function () {
Go (500);
}, 2000);
function Go (NR) {
$ ('. BB '). Fadetoggle (200);
$ ('. Message '). Toggleclass (' Comein ');
$ ('. Check '). Toggleclass (' Scaledown ');
$ (' #go '). Fadetoggle (NR);
}
//@ sourceurl=pen.js
</script>
CSS code:
The
code is as follows:
Body, HTML
{
height:100%;
font-size:20px;
Font-family:source Sans Pro;
}
b,. BB
{
Position:absolute;
width:100%;
height:100%;
Background:url ("kje4l5j.jpg");
background-attachment:fixed;
Background-size:cover;
Background-position:center;
}
. BB
{
Background:url ("bdbs0et.jpg");
background-attachment:fixed;
Background-size:cover;
Background-position:center;
Display:none;
}
#go
{
Position:absolute;
top:30px;
left:50%;
transform:translate (-50%, 0%);
Color:white;
border:0;
background: #71c341;
width:100px;
height:30px;
border-radius:6px;
Font-size:1rem;
transition:background 0.2s Ease;
Outline:none;
}
#go: Hover
{
background: #8ecf68;
}
#go: Active
{
background: #5a9f32;
}
. Message
{
Position:absolute;
top: -200px;
left:50%;
transform:translate (-50%, 0%);
width:300px;
Background:white;
border-radius:8px;
padding:30px;
Text-align:center;
font-weight:300;
color: #2c2928;
opacity:0;
transition:top 0.3s cubic-bezier (0.31, 0.25, 0.5, 1.5), opacity 0.2s ease-in-out;
}
. message. Check
{
Position:absolute;
top:0;
left:50%;
transform:translate ( -50%, -50%) scale (4);
width:120px;
height:110px;
background: #71c341;
Color:white;
Font-size:3.8rem;
padding-top:10px;
border-radius:50%;
opacity:0;
transition:transform 0.2s 0.25s cubic-bezier (0.31, 0.25, 0.5, 1.5), opacity 0.1s 0.25s ease-in-out;
}
. message. Scaledown
{
transform:translate ( -50%, -50%) scale (1);
opacity:1;
}
. Message P
{
Font-size:1.1rem;
margin:25px 0px;
padding:0;
}
. Message P:nth-child (2)
{
Font-size:2.3rem;
margin:40px 0px 0px 0px;
}
. Message #ok
{
position:relative;
Color:white;
border:0;
background: #71c341;
width:100%;
height:50px;
border-radius:6px;
Font-size:1.2rem;
transition:background 0.2s Ease;
Outline:none;
}
. Message #ok: Hover
{
background: #8ecf68;
}
. Message #ok: Active
{
background: #5a9f32;
}
. Comein
{
top:150px;
opacity:1;
}
The above is based on jquery produced a beautiful pop-up layer hint of the full code of the effect, very beautiful, small partners can be used directly to their own projects.
