网站建设 万网企业网络营销策划方案设计
web/
2025/10/4 22:14:51/
文章来源:
网站建设 万网,企业网络营销策划方案设计,千库网ppt,赤峰网站建设哪家好这是一个HTML文件#xff0c;主要包含了一些CSS样式和JavaScript代码#xff0c;用于创建一个动画效果。 在CSS部分#xff0c;定义了一些基本的样式#xff0c;包括页面的背景颜色、位置、大小等。特别的#xff0c;定义了两种球形元素#xff08;.ball_A 和 .ball_B主要包含了一些CSS样式和JavaScript代码用于创建一个动画效果。 在CSS部分定义了一些基本的样式包括页面的背景颜色、位置、大小等。特别的定义了两种球形元素.ball_A 和 .ball_B的样式以及它们的动画效果。 在JavaScript部分定义了一个名为Ball的类用于创建球形元素并控制它们的运动。Ball类有一些方法如random用于生成随机数render用于渲染球形元素update用于更新球形元素的位置。 在页面加载时会调用creatBall函数创建一系列的球形元素并将它们添加到页面中。然后调用render函数使这些球形元素按照预定的动画效果进行运动。 总的来说这个HTML文件的主要功能是创建一个动画效果其中包含一系列的球形元素在页面上进行运动。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody,html{width: 100%;height: 100%;background: #222;overflow: hidden;position: relative;--m-x:51px;--m-y:51px}.playground{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 600px;height: 300px;display: flex;justify-content: space-around;align-items: center;}.ball{width: 100px;height: 100px;border-radius: 50%;/*border: 1px solid #FFFFFF;*/position: relative;}.ball_A{/*border: 1px solid #a101f6;*/color: #FFFFFF;background: #a101f6;cursor: pointer;animation: scaleBall 0.5s forwards;}.ball_B{/*border: 1px solid #FFFFFF;*/color: #FFFFFF;}.ball_B1{border: none;width: 20px;height: 20px;background:#0d84ff;transform: scale(0);left: -20px;border-radius: 10px 30px 20px 20px / 15px 10px 25px 25px;animation: transBall 0.8s 1.2s forwards;}.text{display: inline-block;width: 100px;line-height: 100px;color: white;text-align: center;}keyframes scaleBall {0%{transform: scale(1.0);}100%{transform: scale(1.3);background: none;/*border: 1px solid #fff;*/}}.small-ball{width: 10px;height: 10px;background: #0d84ff;border-radius: 50%;position: absolute;/*animation: moveBall 0.5s forwards;*/}keyframes transBall {0%{transform: scale(0);border-radius: 5px 10px 15px 5px / 8px 7px 6px 15px;}50%{border-radius: 10px 30px 20px 20px / 15px 10px 25px 25px;}100%{transform: scale(6);border-radius: 50px}}/style
/head
body
div classplaygrounddiv classball ball_Aspan classtextA/span/divdiv classball ball_Bspan classtextB/span/div
/div
div classplaygrounddiv classball styleopacity: 0span classtexta/span/divdiv classball ball_B1
!-- span classtextB/span--/div
/div
scriptconst playground document.querySelector(.playground)const ctx document.querySelector(.ball_A)const ctx_b document.querySelector(.ball_B)const play playground.getBoundingClientRect()const rect ctx.getBoundingClientRect()const rect_b ctx_b.getBoundingClientRect()const list []const pox {y: rect.height,x: rect.width,bx: rect_b.left - play.left,by: rect_b.top - play.top}class Ball{constructor(con,x,y) {this.x x;this.y y;this.width con.x;this.height con.y;this.ex this.random(-20,con.x)this.ey this.random(-20,con.y)this.dx this.random(-5, 6); // -5~5this.dy this.random(-5, 6); // -5~5this.dom }random(min,max){return Math.random()* (max - min) min;}render(index,step){const move keyframes moveBall_${index} {0%{top:${this.y}px;left: ${this.x}px;}50%{top:${this.ey}px;left: ${this.ex}px;}100%{top:${this.y}px;left: ${pox.bx - 100}px;}}const sheet document.styleSheets[0];sheet.insertRule(move, 0)const div document.createElement(div)div.className small-balldiv.style.transform scale(${Math.random() 0.5})div.style.opacity Math.random() 0.5div.style.animation moveBall_${index} ${step}s cubic-bezier(0.23, 1, 0.32, 1) forwardsctx.appendChild(div)this.dom div}}creatBall()function creatBall(){let step 2const x pox.x / 2const y pox.y / 2for (let i 0; i 50; i){step 0.01const ball new Ball(pox,x,y)ball.render(i,step)list.push(ball)}}/script
/body
/html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/87010.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!