HTML-CSS-JS/part 2 Google Logo at master · sahanar11/HTML-CSS-JS · GitHub

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
	<title>gmail anima</title>
	<style>
		body {
			background-color: white;
		}
	#main_div {
		background-color: whitesmoke;
		position: relative;
		top:100px;
		/* left:400px; */
		margin: auto;
		width:173px;
		height:128px;
		border-radius: 12px;
		overflow: hidden;
		opacity: 0.3PX;
	}

	#rot1_div{

		background-color: red;
		position: absolute;
		top:-117px;
		margin: auto;
		/* width:176px; */
		/* height:176px;  */
		transform: rotate(135deg);
		animation: fadein 2s;

	}

	#rot2_div{
		background-color: whitesmoke;
		position: absolute;
		top:-145px;
		margin: auto;
		width:176px;
		height:176px;
		opacity: 1;
		transform: rotate(135deg);
		animation: fadein 2s;
	}

	#rot3_div{
		background-color: red;
		position: absolute;
		/* top:0px; */
		left:-158px;
		margin: auto;
		width:176px;
		height:128px;
		border-radius: 0px 0px 0px 12px;
		animation: rot3in 2s;
	}

	#rot4_div{
		background-color: red;
		position: absolute;
		/* top:0px; */
		left:155px;
		margin: auto;
		width:176px;
		height:128px;
		border-radius: 0px 12px 0px 0px;
		animation: rot4in 2s;
	}
#circle_div {
	border-radius: 50%;
	background-color:whitesmoke;
	position: relative;
	top:170px;
	margin:auto;
	animation: circlein 2s;
	/* z-index: 2; */
}
@keyframes fadein {
  from { width: 1px;height: 1px ; }
  to   { width: 176px;height: 176px ; }
}

@keyframes rot3in {
  from { top:-119px; }
  to   { top: 8px ;}
}
@keyframes rot4in {
  from { top:-128px; }
  to   { top: 2px ;}
}
@keyframes circlein {
  from { width: 10px ; height:10px;}
  to   { width: 250px; height:250px;}
}
	</style>
</head>
<body>
		<div id="circle_div">

				<div id="main_div">

						<div id="rot1_div">  </div>
						<div id="rot2_div"></div>
						<div id="rot3_div"></div>
						<div id="rot4_div"></div>
				  </div>
		</div>


</body>
</html>