js实现动态气泡效果

原文链接:https://www.jb51.net/article/75436.htm

本文实例讲述了javascript实现很浪漫的气泡冒出特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

js实现动态气泡效果_第1张图片

具体代码如下:

实现思路:HTML里只需要一个CANVAS元素,Javascript里操作canvas
1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形,x坐标屏幕水平随机,y所标竖直大于屏幕高度。
  圆形背景色可以是随机,那就是各种色彩了!
    利用计时器控制y--

构建html

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="Generator" content="EditPlus®">

 <meta name="Author" content="">

 <meta name="Keywords" content="">

 <meta name="Description" content="">

 <title>5多个小球往上运动title>

 <style>

 style>

 head>

 <body>

  <div id="d1">

    <canvas id="canvas">canvas>

  div>

 body>

html>

js代码

?

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

 

 

需要在自己的网站中添加浪漫元素,这不失为一种好的方式,希望大家灵活运用javascript实现气泡冒出特效,谢谢大家的阅读。

你可能感兴趣的:(javaScript)