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

最新推荐文章于 2025-04-21 16:43:06 发布

白嘉郁

最新推荐文章于 2025-04-21 16:43:06 发布

阅读量1.5k

点赞数

文章标签： html5悬浮效果

这篇博客详细介绍了如何使用HTML5和CSS3创建一个具有悬浮效果的元素，特别是设计了一个悬浮球动画，包括球体的样式设置、不同方向的移动动画，并通过媒体查询确保在屏幕尺寸小于500px时显示该悬浮球。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 }

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 }

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

37 .SuspendedBall {38 display:block;

39 }

40 }41

43 @keyframes SuspendedBallToLeft{

44 100% {45 left:0px;

46 }

47 }48

49 @-webkit-keyframes SuspendedBallToLeft{

50 100% {51 left:0px;

52 }

53 }54

55 @-moz-keyframes SuspendedBallToLeft{

56 100% {57 left:0px;

58 }

59 }60

62 .ToLeft{

63 animation:SuspendedBallToLeft 1s normal;

64 -moz-animation:SuspendedBallToLeft 1s normal; /*Firefox*/

65 -webkit-animation:SuspendedBallToLeft 1s normal; /*Safari 和 Chrome*/

66 animation-iteration-count:1;

67 -moz-animation-iteration-count:1; /*Safari 和 Chrome*/

68 -webkit-animation-iteration-count:1; /*Safari 和 Chrome*/

69 animation-fill-mode:forwards;

70 -moz-animation-fill-mode:forwards;

71 -webkit-animation-fill-mode:forwards;

72 }

74 @keyframes SuspendedBallToTop{

75 100% {76 top:0px;

77 }

78 }79

80 @-webkit-keyframes SuspendedBallToTop{

81 100% {82 top:0px;

83 }

84 }85

86 @-moz-keyframes SuspendedBallToTop{

87 100% {88 top:0px;

89 }

90 }91

93 .ToTop{

94 animation:SuspendedBallToTop 1s normal;

95 -moz-animation:SuspendedBallToTop 1s normal; /*Firefox*/

96 -webkit-animation:SuspendedBallToTop 1s normal; /*Safari 和 Chrome*/

97 animation-iteration-count:1;

98 -moz-animation-iteration-count:1; /*Safari 和 Chrome*/

99 -webkit-animation-iteration-count:1; /*Safari 和 Chrome*/

100 animation-fill-mode:forwards;

101 -moz-animation-fill-mode:forwards;

102 -webkit-animation-fill-mode:forwards;

103 }

104

105 @keyframes SuspendedBallToBottom{

106 100% {107 top:calc(100% - 50px);

108 top:-webkit-calc(100% - 50px);

109 top:-moz-calc(100% - 50px);

110 }

111 }112

113 @-webkit-keyframes SuspendedBallToBottom{

114 100% {115 top:calc(100% - 50px);

116 top:-webkit-calc(100% - 50px);

117 top:-moz-calc(100% - 50px);

118 }

119 }120

121 @-moz-keyframes SuspendedBallToBottom{

122 100% {123 top:calc(100% - 50px);

124 top:-webkit-calc(100% - 50px);

125 top:-moz-calc(100% - 50px);

126 }

127 }128

129 .ToBottom{

130 animation:SuspendedBallToBottom 1s normal;

131 -moz-animation:SuspendedBallToBottom 1s normal; /*Firefox*/

132 -webkit-animation:SuspendedBallToBottom 1s normal; /*Safari 和 Chrome*/

133 animation-iteration-count:1;

134 -moz-animation-iteration-count:1; /*Safari 和 Chrome*/

135 -webkit-animation-iteration-count:1; /*Safari 和 Chrome*/

136 animation-fill-mode:forwards;

137 -moz-animation-fill-mode:forwards;

138 -webkit-animation-fill-mode:forwards;

139 }

140

141 @keyframes SuspendedBallToRight{

142 100% {143 left:calc(100% - 50px);

144 left:-webkit-calc(100% - 50px);

145 left:-moz-calc(100% - 50px);

146 }

147 }148

149 @-webkit-keyframes SuspendedBallToRight{

150 100% {151 left:calc(100% - 50px);

152 left:-webkit-calc(100% - 50px);

153 left:-moz-calc(100% - 50px);

154 }

155 }156

157 @-moz-keyframes SuspendedBallToRight{

158 100% {159 left:calc(100% - 50px);

160 left:-webkit-calc(100% - 50px);

161 left:-moz-calc(100% - 50px);

162 }

163 }164

165 .ToRight{

166 animation:SuspendedBallToRight 0.5s normal;

167 -moz-animation:SuspendedBallToRight 0.5s normal; /*Firefox*/

168 -webkit-animation:SuspendedBallToRight 0.5s normal; /*Safari 和 Chrome*/

169 animation-iteration-count:1;

170 -moz-animation-iteration-count:1; /*Safari 和 Chrome*/

171 -webkit-animation-iteration-count:1; /*Safari 和 Chrome*/

172 animation-fill-mode:forwards;

173 -moz-animation-fill-mode:forwards;

174 -webkit-animation-fill-mode:forwards;

175 }

176

177

178

179 .BallBox{

180 position:fixed;

181 z-index:999;

182 top:calc(50% - 160px);

183 left:calc(50% - 160px);

184 display:block;

185 width:300px;

186 border:1px solid #808080;

187 border-radius:10px;

188 height:300px;

189 padding:10px;

190 display:none;

191 }

192

193 .BallBox > .Bg{

194 position:absolute;

195 z-index:998;

196 width:300px;

197 height:300px;

198 background-color:#ededed;

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

200 background-repeat:no-repeat;

201 background-size:50% auto;

202 background-position:50% 50%;

203 filter:alpha(opacity=30);

204 -moz-opacity:0.3;

205 opacity:0.3;

206 }

207

208 .BallBox > .BallBoxInfo{

209 position:absolute;

210 z-index:999;

211 width:300px;

212 height:300px;

213 overflow:auto;

214 }