search_home.css
1.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
body
{
background:rgb(26, 154, 248);
}
#main_frame
{
width:1600px;
height:900px;
margin: auto;
}
.search
{
position:relative;
width: 700px;
height:100px;
top:-15%;
margin:auto;
background:white;
border-radius: 50px;
border:4px solid black;
}
#left
{
position:relative;
width:400px;
height:400px;
top:45%;
}
#right
{
position:relative;
width:450px;
height:400px;
top:45%;
left:45%;
}
.box {
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-left {
0% {
transform: translateX(-1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.box2 {
animation: slide-in-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-right {
0% {
transform: translateX(1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#name
{
outline:none;
position:relative;
width: 350px;
height:50px;
font-size:x-large;
top:50%;
left:5%;
border:0px;
margin:-25px 0px 0px 0px;
float:left;
}
#OK
{
position:relative;
background-image: url('metadata/image/button.png');
width:70px;
height:70px;
border:0px;
float:left;
left:35%;
margin:15px 0px 0px 0px;
}
#loading
{
position:relative;
left:-25%;
}