javascript+css3开发打气球小游戏完整代码 - CSDN文库

30 浏览量更新于2023-03-03 评论收藏 56KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

javascript+css3开发打气球小游戏完整代码开发打气球小游戏完整代码

效果知识点：效果知识点：

css3画气球, 自定义属性运用，随机阵列, DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运

用，CSS3新增样式等。

css代码如下：代码如下：

<style>

{margin:0;padding:0;}

body{background:#434343;overflow:hidden}

.balloon{

position:absolute;

left:0;

top:0;

margin:auto;

width:160px;

height:160px;

圆角: 左上右上右下左下

/

css3旋转顺时针旋转45度

/

background:#faf9f9;

x轴的位置 y轴的位置影子扩散程度模糊度颜色

/

}

.balloon:after{

伪元素的内容

/

display:block;

position:absolute;

因为气球是旋转的现在的正下方其实是右下角*/

right:0px;

width:0px;

height:0px;

border:8px solid #dbbdbd;

border-top-color:transparent;

border-bottom-color:transparent;

border-left-color:transparent;

transform:rotate(45deg);

border-radius:16px;

}

#wrap{

width:200px;

height:200px;

background:red;

}

</style>

javascript代码如下：

<script>

var num = 10; // 声明遍历num 为div的数量

//var oBody = document.querySelector('body'); //h5 api 获取元素的方法

var oBody=document.documentElement || document.body; //body获取兼容性写法

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38548394

粉丝: 2
资源: 913

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈