js全屏星空背景发送文字弹幕动画特效.zip资源-CSDN文库

共3个文件

jpg：1个

html：1个

css：1个

版权申诉

实用代码

实用插件

63 浏览量 2023-09-27 22:18:12 上传评论收藏 39KB ZIP 举报

这个压缩包"js全屏星空背景发送文字弹幕动画特效.zip"包含了一个完整的网页项目，旨在实现一个引人注目的视觉效果：在全屏的星空背景下动态显示文字弹幕。这个效果常见于各类活动页面、个人网站或者音乐播放界面，为用户带来沉浸式的体验。下面我们将详细探讨这个项目的组成部分及其涉及的JavaScript和CSS知识点。 `index.html`是整个项目的入口文件，它定义了网页的基本结构。在这个项目中，HTML可能会包含一个全屏的`<body>`元素，用来作为星空背景的容器，以及一个或多个用于显示弹幕的`<div>`元素。这些弹幕元素可能通过JavaScript动态生成，以模拟从屏幕一侧滑动到另一侧的效果。接着，`css`文件夹通常包含项目的样式表，如`style.css`。在这个项目中，CSS将用于设置星空背景图（可能是背景图片或者使用CSS渐变和滤镜创建星空效果）、弹幕元素的样式（包括颜色、大小、位置、透明度变化等）以及可能存在的交互效果（如鼠标悬停时的动画）。CSS3的过渡和关键帧动画是实现平滑动画效果的关键工具，例如使用`@keyframes`定义动画过程，然后应用到弹幕元素的`animation`属性上。然后，JavaScript部分负责动态生成和控制弹幕。这可能是一个单独的`script.js`文件，也可能内联在`index.html`中。JavaScript会创建新的弹幕元素，设置它们的初始位置和文本，然后利用定时器或requestAnimationFrame方法来更新弹幕的位置，从而实现从屏幕一端移动到另一端的动画。为了使效果更加真实，还可以随机调整弹幕的速度和方向。此外，如果用户有二次修改的需求，JavaScript还可以添加交互功能，比如用户输入文字后即时创建弹幕，或者控制弹幕的显示速度和数量。在实际的项目中，还可能包含其他文件，如图片资源（位于`img`文件夹中），它们可能被用作星空背景或者弹幕中的图标。JavaScript和CSS的优化也很重要，例如合并和压缩文件以减少HTTP请求，优化图片大小以提高加载速度。这个项目涵盖了HTML布局、CSS样式设计和JavaScript动态效果的实现，是学习前端开发实战技能的好例子。通过这个项目，开发者可以深入理解如何结合HTML、CSS和JavaScript来创建动态、互动的网页元素，并且熟悉如何利用这些技术来提升用户体验。对于初级和中级开发者来说，这是一个很好的实践和学习资源。

资源推荐

资源详情

资源评论

收起资源包目录

js全屏星空背景发送文字弹幕动画特效.zip （3个子文件）

img

x.jpg 32KB

css

animation.css 103KB

index.html 6KB

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <style> *{ padding: 0; margin: 0; } html,body{ height: 100%; user-select:none; } .screen{ overflow: hidden; position: relative; height: 100%; background-color: rgba(0,0,0,0.8); background-image: url(img/x.jpg); background-repeat: no-repeat; background-size: 100% 100%; } .send{ position: absolute; bottom: 0; width: 100%; height: 80px; line-height: 80px; background-color: rgba(10,10,10,0.6); text-align: center; } .input{ position: absolute; left: 50%; top: 50%; margin: -20px -350px; font-size: 0; } .text{ float: left; width: 600px; height: 40px; border: none; border-radius: 8px 0 0 8px; } .s_show div{ position: absolute; font-size: 24px; font-weight: bold; } .btn{ float: left; width: 100px; background-color:black; line-height: 40px; font-size: 18px; color: #fff; cursor: pointer; border-radius: 0 8px 8px 0; } </style> <link rel="stylesheet" href="css/animation.css"> <title>星空弹幕</title> </head> <body> <div class="screen"> <div class="send"> <div class="input clearfix"> <input type="text" class="text"> <div class="btn">发送弹幕</div> </div> </div> <div class="s_show"> <div class="magictime twisterInUp">欢迎使用彩色星空弹幕</div> <div class="magictime twisterInUp">扶我起来，这串代码还没封装</div> <div class="magictime twisterInUp">3点了，总算下班了，呵呵呵````</div> </div> </div> <script> //模块化每个功能函数去做自己相应的事情代码可维护性可扩展性 //初始化函数 var aShowList = document.querySelectorAll('.s_show div');//获取元素 H5 var oShow = document.querySelector('.s_show'); var oSend = document.querySelector('.send'); var oBtn = document.querySelector('.btn'); var oText = document.querySelector('.text'); var time = 0;//上一次你发送的时间 var time1 = 0; //点击发送弹幕 oBtn.onclick = function(){//鼠标点击事件 //oBtn.style.backgroundColor = randomColor();//按钮背景颜色变换 time1 = new Date(); oBtn.style.color = randomColor();//按钮字体颜色变换 if(time1 - time > 3000){//2次发送的时间必须大于2秒 var oDiv = document.createElement('div');//创建div oDiv.innerHTML = oText.value;//添加弹幕内容 oDiv.className = 'magictime twisterInUp';//弹幕特效 oShow.appendChild(oDiv);//添加一个子节点 init(oDiv);//初始化 oText.value = ''; time = time1; //console.log(time); }else{ alert("请稍后再发~"); } } for(var i = 0;i < aShowList.length;i++){ init(aShowList[i]);//执行初始化函数 } function init(obj){//接受弹幕对象 //确定top值的随机区间 var screenHeight = document.documentElement.clientHeight;//获取屏幕可视高度 var maxTop = screenHeight - oSend.offsetHeight - obj.offsetHeight;//高度差范围 obj.style.top = maxTop * Math.random() + 'px'; //控制left值 var screenWidth = document.documentElement.clientWidth;//获取可视宽度 var maxLeft = screenWidth - obj.offsetWidth - Math.random() * 100;//随机宽度差 obj.style.left = maxLeft + 'px'; //弹幕的随机颜色 obj.style.color = randomColor(); /*setInterval(function(){ move(obj,maxLeft); },1000);*///普通定时器 move(obj,maxLeft); } //弹幕移动函数 function move(obj,maxLeft){ var speed = 5;//控制速度的变量 maxLeft -= speed;//往左移动 if(maxLeft > -obj.offsetWidth){ obj.style.left = maxLeft + 'px'; requestAnimationFrame(function(){ move(obj,maxLeft); });//H5新增的动画函数 }else{ //init(obj);//重新初始化营造循环弹幕效果 oShow.removeChild(obj);//DOM删除子节点 } } //随机颜色函数 function randomColor(){ return '#' + Math.random().toString(16).slice(-6);//一行简化版截取后六位 /*var str = '#'; for(var i = 0;i < 6;i++){ str += Math.floor(Math.random() * 16).toString(16); } return str;*///普通逻辑版 } </script> </body> </html>

评论收藏

内容反馈

版权申诉