html-css3-js-project-for-beginner/3.html at master · Hack6rapu/html-css3-js-project-for-beginner · 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
<html>
<head>
<style>
	.circle{
	position:relative;
	left:30%;top:30%;
	display:block;
	margin:0;
	width:100px; height:100px;
	border-radius:50%;
	background:black;
	border:30px solid lightyellow;
	background: radial-gradient(circle at 50px 50px, yellow,darkorange);
	animation-name:cc;
	animation-duration:4s;

	-webkit-animation:cc 2s infinite;}
	@-webkitkeyframes cc{from
	{background:radial-gradient(circle at 50px 50px, yellow,darkorange);}
	to{background:radial-gradient(circle at 50px 50px, darkorange,blue);}}
	@keyframes cc{from
	{background:yellow;
	background:radial-gradient(circle at 50px 50px, yellow,darkorange);
	border:30px solid lightyellow;
	left:0%;}
	to{background:blue;
	background:radial-gradient(circle at 50px 50px, grey,black);
		border:30px solid lightgrey; left:50%;}
		}
</style>
</head>
<body><br>
<div>
<figure class="circle"></figure><br><br><br>Transform From sun to moon
</div>
</body>
</html>