html5悬浮效果,html5悬浮球效果

1 .SuspendedBall{

2 position:fixed;

3 width:50px;

4 height:50px;

5 background:#3071a9;

6 border-radius:10px;

7 -moz-border-radius:10px;

8 -webkit-border-radius:10px;

9 filter:alpha(opacity=50); /*IE滤镜，透明度50%*/

10 -moz-opacity:0.5; /*Firefox私有，透明度50%*/

11 opacity:0.5; /*其他，透明度50%*/

12 z-index:999; /*最高的层级*/

13 top:100px;

14 left:0px;

15 display:none;

16 }

17

18 .SuspendedBall > div{

19 width:30px;

20 height:30px;

21 margin:10px;

22 background:#fff;

23 border-radius:15px;

24 -moz-border-radius:15px;

25 -webkit-border-radius:15px;

26 filter:alpha(opacity=80);

27 -moz-opacity:0.8;

28 opacity:0.8;

29 background-image:url("/Images/Self.png");

30 background-repeat:no-repeat;

31 background-size:80% auto;

32 background-position-x:50%;

33 background-position-y:50%;

34 }

35

36 @media screen and (max- 500px){

37 .SuspendedBall {38 display:block;

39 }

40 }41

42

43 @keyframes SuspendedBallToLeft{

4