<!DOCTYPE html>
<
html
lang=
"zh-cn">
<
head>
<
meta
charset=
"UTF-8">
<
title>HTML5+CSS3练习</
title>
</
head>
<
body>
<
fieldset
style=
"height:550px;">
<
legend>自由落体</
legend>
北京时间:<
span
class=
"time"></
span>
<
figure
class=
"circle"></
figure>
<
figure
class=
"shadow"></
figure>
<
style>
@keyframes
circle{
0%,100%{
margin-top:
20
px;
}
2%{
margin-top:
20
px;
}
98%{
margin-top:
20
px;
}
48%{
margin-top:
300
px;
}
52%{
margin-top:
300
px;
}
}
.circle{
height:
200
px;
width:
200
px;
margin:
20
px
auto
0
px;
border-radius:
50
%;
position:
relative;
z-index:
10;
background-image:
radial-gradient(
circle
at
70
px
80
px,
#39c,
#000);
animation:
circle
2
s
ease-in
infinite
alternate;
}
@keyframes
shadow{
0%,100%{
height:
50
px;
width:
50
px;
margin-left:
-25
px;
margin-top:
40
px;
background-color:
rgba(
0,
0,
0,
0.5);
}
2%{
height:
50
px;
width:
50
px;
margin-left:
-25
px;
margin-top:
40
px;
background-color:
rgba(
0,
0,
0,
0.5);
}
98%{
height:
50
px;
width:
50
px;
margin-left:
-25
px;
margin-top:
40
px;
background-color:
rgba(
0,
0,
0,
0.5);
}
48%{
height:
170
px;
width:
170
px;
margin-left:
-85
px;
margin-top:
-10
px;
background-color:
rgba(
0,
0,
0,
0.8);
}
52%{
height:
170
px;
width:
170
px;
margin-left:
-85
px;
margin-top:
-10
px;
background-color:
rgba(
0,
0,
0,
0.8);
}
}
.shadow{
transform-style:
preserve-3d;
transform:
rotate3d(
1,
0,
0,
80
deg);
animation:shadow
2
s
ease-in
infinite
alternate;
border-radius:
50
%;
position:
absolute;
top:
470
px;
left:
50
%;
}
</
style>
<
script>
// $(function(){
// time();
// window.setInterval(time,1000);
// });
// var time=function(){
// var date=new Date();
// $(".time").text(date.toLocaleString());
// }
</
script>
</
fieldset>
</
body>
</
html>