js气球漂浮

气球漂浮

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW JavaScript

作者:彭嘉豪

撰写时间：2021：5：8

样式截图

 

• HTML部分放一个div。

 

• Css

1.

先把body的外边距设置为0。

Box的样式  .balloon是气球的样式。

 

2.

before 在元素之前添加内容 添加的是气球线的样式。

after 被选元素的内容后面插入内容 添加的是气球下的三角形样式。

 

 

3.

@keyframes 能够创建动画

transform 属性向元素应用 2D 或 3D 转换。该属性可对元素进行旋转、缩放、移动或倾斜。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

translateY(y) 定义转换，只是用 Y 轴的值

opacity设置 div 元素的不透明级别

 

• Javascript

1. 定义方法为了获取到随机数，这样可以获取到0~255的随机数。

用随机数设置气球的样式，就得到随机颜色的气球。

 

 

定义方法 获取box div ，for循环用来循环添加气球。

 

/*createElement添加、删除和替换 HTML 元素， 添加div*/

设置div的classname ，可以得到前面css设置的样式。

 

/*cssText 属性 它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表，去掉了包围属性和值的元素选择器的花括号。*/

Style.cssText用于把添加div的样式设置成前面的随机样式。

 

/* append() - 在被选元素的结尾插入内容*/

在页面的结尾插入写好的随机样式的气球。

 

window.onload = function() {

            Ball(100);

}

页面加载运行这个方法