-------------写在前面-------------
之前喜欢收集能美化网页的代码，比如给网页加个背景啦，给鼠标加个特效啦，来来回回也收集到了一些“使用简单”，“效果爆炸”的页面，给大家陆续分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o，之后还会分享许多干货，话不多说，先看组合好的效果
文章目录
1 不同语言滚动的我爱你
代码
<html><head><metacharset="UTF-8"><styletype="text/css">body{background:#43EEF4;texta-align:center;color:pink;width: 100%;}</style></head><body><marqueewidth="160px"direction="left"behavior="scroll"scrollamount="12"hspace="800px">w我爱你</marquee><br><marqueewidth="220px"direction="left"behavior="scroll"scrollamount="22"hspace="800px"><h4>我爱你</h4></marquee><br><marqueewidth="220px"direction="right"behavior="scroll"scrollamount="13"hspace="800px"><h3>사랑해</h3></marquee><br><marqueewidth="220px"direction="left"behavior="scroll"scrollamount="24"hspace="780px">我爱你</marquee><br><marqueewidth="260px"direction="right"behavior="scroll"scrollamount="15"hspace="780px"><h5>我爱你</h5></marquee><br><marqueewidth="260px"direction="left"behavior="scroll"scrollamount="16"hspace="760px">我爱你</marquee><br><marqueewidth="260px"direction="right"behavior="scroll"scrollamount="17"hspace="760px">我爱你</marquee><br><marqueewidth="320px"direction="left"behavior="scroll"scrollamount="18"hspace="740px"><h5>love</h5></marquee><br><marqueewidth="320px"direction="right"behavior="scroll"scrollamount="29"hspace="740px">我爱你</h1></marquee><br><marqueewidth="320px"direction="left"behavior="scroll"scrollamount="20"hspace="720px">我爱你</marquee><br><marqueewidth="360px"direction="right"behavior="scroll"scrollamount="10"hspace="720px">愛する</marquee><br><marqueewidth="360px"direction="left"behavior="scroll"scrollamount="21"hspace="700px"><h1>我爱你</h1></marquee><br><marqueewidth="360px"direction="right"behavior="scroll"scrollamount="11"hspace="700px">love</marquee><br><marqueewidth="400px"direction="left"behavior="scroll"scrollamount="18"hspace="6900px">我爱你</marquee><br><marqueewidth="400px"direction="right"behavior="scroll"scrollamount="18"hspace="680px">EU te amo</marquee><br><marqueewidth="360px"direction="left"behavior="scroll"scrollamount="16"hspace="690px">我爱你</marquee><br><marqueewidth="360px"direction="right"behavior="scroll"scrollamount="16"hspace="700px"><h4>我爱你</h4></marquee><br><marqueewidth="360px"direction="left"behavior="scroll"scrollamount="16"hspace="700px">love</marquee><br><marqueewidth="320px"direction="right"behavior="scroll"scrollamount="14"hspace="7200px"><h2>我爱你</h2></marquee><br><marqueewidth="320px"direction="left"behavior="scroll"scrollamount="15"hspace="7200px">Ich liebe dich</marquee><br><marqueewidth="320px"direction="right"behavior="scroll"scrollamount="16"hspace="740px">我爱你</marquee><br><marqueewidth="260px"direction="left"behavior="scroll"scrollamount="18"hspace="740px">love</marquee><br><marqueewidth="260px"direction="right"behavior="scroll"scrollamount="17"hspace="760px">我爱你</marquee><br><marqueewidth="260px"direction="left"behavior="scroll"scrollamount="16"hspace="760px"><h2>我爱你</h2></marquee><br><marqueewidth="220px"direction="right"behavior="scroll"scrollamount="15"hspace="780px">我爱你</marquee><br><marqueewidth="220px"direction="left"behavior="scroll"scrollamount="14"hspace="780px">我爱你</marquee><br><marqueewidth="220px"direction="right"behavior="scroll"scrollamount="13"hspace="800px">Je t' aime</marquee><br><marqueewidth="160px"direction="left"behavior="scroll"scrollamount="12"hspace="800px">我爱你</marquee><br><embedsrc="yinyue.mp3"width="0"height="0"autostart="ture"loop="ture"></embed></body></html>
2爱心动画
代码
<html><head><metacharset="UTF-8"><title></title><styletype="text/css">.heart{width:200px;height:200px;background-color: #eb3f84;margin:200px auto;position:relative;transform:rotate(45deg);animation:heart 4s ease infinite;}html{animation:html 6s ease infinite;}.heart::before{content:'';width: 200px;height: 200px;background-color: #eb3f84;border-radius:50%;position:absolute;top:100px;left: 0;animation:left 6s ease infinite;transform:all 4s ease;}.heart::after{content:'';width: 200px;height: 200px;background-color: #eb3f84;border-radius:50%;position:absolute;top:0px;left: 100;animation:right 6s ease infinite;transform:all 4s ease;}@keyframes html{0%{background-color: #eb3f84;}50%{background-color: #3ff;}100%{background-color: #eb3f84;}}@keyframes hearts{0%{teansform:rotate(0deg);border-radius:200px;background-color:#fff;}30%{tranform:rotate(45deg);border-radius:10px;}50%{background-color: #eb3f84;}70%{tranform:rotate(45deg);border-radius:10px;}100%{tranform:rotate(90deg);border-radius:200px;background-color: #fff;}}@keyframes left{0%{top:0;background-color: #fff;}30%{top:-100px;}50%{background-color:#eb3f84;}70%{top:-100px;}100%{top: 0;background-color: #fff;}}@keyframes right{0%{left:0;background-color: #fff;}30%{left:-100px;}50%{background-color:#eb3f84;}70%{left:-100px;}100%{left: 0;background-color: #fff;}}</style></head><body><divclass="heart"></div></body></html>
3时钟转动
代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>html{background: #43EEF4;color: #666;font-size: 12px;overflow:hidden;}*{margin: 0;padding: 0;}span{display: block;float: left;}.on{color: #fff;}.wrapper{width: 200px;height: 200px;position: absolute;left:50%;top:50%;margin-top: -100px;margin-left: -100px;}.wrapper .timebox{position: absolute;width: 200px;height: 200px;top: 0;left:0;border-radius: 100%;transition: all 0.5s;}.timebox span{transition: all 0.5s;float: left;}.wrapper .timebox span{position: absolute;left:50%;top:50%;width: 40px;height: 18px;margin-top: -9px;margin-left: -20px;text-align: right;}</style></head><body><divid="wrapper"><divclass="timebox yuebox"id="yueBox"></div><divclass="timebox riqiBox"id="riqiBox"></div><divclass="timebox hourbox"id="hourbox"></div><divclass="timebox minutebox"id="minutebox"></div><divclass="timebox secondbox"id="secondbox"></div></div><script>let wrapper = document.getElementById("wrapper");let yueBox = document.getElementById("yueBox");let riqiBox = document.getElementById("riqiBox");let hourbox = document.getElementById("hourbox");let minutebox = document.getElementById("minutebox");let secondbox = document.getElementById("secondbox");letfindSiblings=function(tag){let parent = tag.parentNode;let childs = parent.children;let sb =[];for(let i=0; i <= childs.length-1; i++){if( childs[i]!==tag){
sb[sb.length]= childs[i];}}return sb ;};letremoveSiblingClass=function(tag){let sb =findSiblings( tag );for(let i=0; i <= sb.length-1; i++){
sb[i].className ="";}};letinitMonth=function(){for(let i=1; i<=12; i++){let span = document.createElement("span");
span.innerHTML = i+"月";
yueBox.appendChild( span );}};letinitDate=function(){for(let i=1; i<=31; i++){let span = document.createElement("span");
span.innerHTML = i+"日";
riqiBox.appendChild( span );}};letinitHour=function(){for(let i=0; i<=23; i++){let h = i ;let span = document.createElement("span");if( h<10){
h="0"+h;}
span.innerHTML = h +"点";
hourbox.appendChild( span );}};letinitMinute=function(){for(let i=0; i<=59; i++){let f = i ;let span = document.createElement("span");if( f<10){
f="0"+f;}
span.innerHTML = f +"分";
minutebox.appendChild( span );}};letinitSecond=function(){for(let i=0; i<=59; i++){let miao = i ;let span = document.createElement("span");if( miao<10){
miao="0"+miao;}
span.innerHTML = miao +"秒";
secondbox.appendChild( span );}};letchangeTime=function(tag){
tag.className ="on";removeSiblingClass( tag );};letinitRili=function(){initMonth();initDate();initHour();initMinute();initSecond();};letshowNow=function(mydate){let yue = mydate.getMonth();let riqi = mydate.getDate();let hour = mydate.getHours();let minute = mydate.getMinutes();let second = mydate.getSeconds();changeTime( yueBox.children[yue]);changeTime( riqiBox.children[riqi-1]);changeTime( hourbox.children[hour]);changeTime( minutebox.children[minute]);changeTime( secondbox.children[second]);};lettextRound=function(tag,num,dis){let span = tag.children ;for(let i=0; i<=span.length-1; i++){
span[i].style.transform="rotate("+(360/span.length)*i+"deg) translateX("+dis+"px)"}};letrotateTag=function(tag , deg){
tag.style.transform ="rotate("+deg+"deg)";};letmain=function(){initRili();setInterval(function(){let mydate =newDate();showNow( mydate );},1000);setTimeout(function(){
wrapper.className ="wrapper";textRound(yueBox,12,40);textRound(riqiBox,31,80);textRound(hourbox,24,120);textRound(minutebox,60,160);textRound(secondbox,60,200);setInterval(function(){let mydate =newDate();rotateTag( yueBox ,-30*mydate.getMonth());rotateTag( riqiBox ,-360/31*(mydate.getDate()-1));rotateTag( hourbox ,-360/24*mydate.getHours());rotateTag( minutebox ,-6*mydate.getMinutes());rotateTag( secondbox ,-6*mydate.getSeconds());},1000)},6000)};main();</script></body></html>
4爱心特效
代码
<!doctypehtml><html><head><metacharset="utf-8"><title>love</title><linkhref="favicon.ico"rel="shortcut icon"/><style>body{overflow: hidden;margin: 0;}h1{position: fixed;top: 50%;left: 0;width: 100%;text-align: center;transform:translateY(-50%);font-family:'Love Ya Like A Sister', cursive;font-size: 40px;color: #c70012;padding: 0 20px;}h1 span{font-size:20px;}</style></head><body><h1id="h1"></h1><canvas></canvas><script>var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");var ww,wh;functiononResize(){
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;}
ctx.strokeStyle ="red";
ctx.shadowBlur =25;
ctx.shadowColor ="hsla(0, 100%, 60%,0.5)";var precision =100;var hearts =[];var mouseMoved =false;functiononMove(e){
mouseMoved =true;if(e.type ==="touchmove"){
hearts.push(newHeart(e.touches[0].clientX, e.touches[0].clientY));
hearts.push(newHeart(e.touches[0].clientX, e.touches[0].clientY));}else{
hearts.push(newHeart(e.clientX, e.clientY));
hearts.push(newHeart(e.clientX, e.clientY));}}varHeart=function(x,y){this.x = x || Math.random()*ww;this.y = y || Math.random()*wh;this.size = Math.random()*2+1;this.shadowBlur = Math.random()*10;this.speedX =(Math.random()+0.2-0.6)*8;this.speedY =(Math.random()+0.2-0.6)*8;this.speedSize = Math.random()*0.05+0.01;this.opacity =1;this.vertices =[];for(var i =0; i < precision; i++){var step =(i / precision -0.5)*(Math.PI*2);var vector ={x:(15* Math.pow(Math.sin(step),3)),y:-(13* Math.cos(step)-5* Math.cos(2* step)-2* Math.cos(3* step)- Math.cos(4* step))}this.vertices.push(vector);}}Heart.prototype.draw=function(){this.size -=this.speedSize;this.x +=this.speedX;this.y +=this.speedY;
ctx.save();
ctx.translate(-1000,this.y);
ctx.scale(this.size,this.size);
ctx.beginPath();for(var i =0; i < precision; i++){var vector =this.vertices[i];
ctx.lineTo(vector.x, vector.y);}
ctx.globalAlpha =this.size;
ctx.shadowBlur = Math.round((3-this.size)*10);
ctx.shadowColor ="hsla(0, 100%, 60%,0.5)";
ctx.shadowOffsetX =this.x +1000;
ctx.globalCompositeOperation ="screen"
ctx.closePath();
ctx.fill()
ctx.restore();};functionrender(a){requestAnimationFrame(render);
hearts.push(newHeart())
ctx.clearRect(0,0,ww,wh);for(var i =0; i < hearts.length; i++){
hearts[i].draw();if(hearts[i].size <=0){
hearts.splice(i,1);
i--;}}}onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);requestAnimationFrame(render);
window.onload=functionstarttime(){time(h1,'2022,5,6');// 在一起的时间
ptimer =setTimeout(starttime,1000);// 添加计时器}functiontime(obj,futimg){var nowtime =newDate().getTime();// 现在时间转换为时间戳var futruetime =newDate(futimg).getTime();// 未来时间转换为时间戳var msec = nowtime-futruetime;// 毫秒 未来时间-现在时间var time =(msec/1000);// 毫秒/1000var day =parseInt(time/86400);// 天 24*60*60*1000 var hour =parseInt(time/3600)-24*day;// 小时 60*60 总小时数-过去的小时数=现在的小时数 var minute =parseInt(time%3600/60);// 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数var second =parseInt(time%60);// 以60秒为一整份 取余 剩下秒数// console.log(hour+":"+minute+":"+second)// alert(hour)
obj.innerHTML="宝贝：我已经爱了你<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>我非常爱你！虽然你无法体会到我的真心，<br>但是我的心中，你是永远的唯一的爱人！我已经学会忘了自己，却无法忘记你。</span>"returntrue;}</script></body></html>
5流星雨
代码
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>流星雨</title><script>var context;var arr =newArray();var starCount =800;var rains =newArray();var rainCount =20;functioninit(){var stars = document.getElementById("stars");
windowWidth = window.innerWidth;//当前的窗口的高度
stars.width = windowWidth;
stars.height = window.innerHeight;
context = stars.getContext("2d");}//创建一个星星对象varStar=function(){this.x = windowWidth * Math.random();//横坐标this.y =5000* Math.random();//纵坐标this.text ="love";//文本this.color ="white";//颜色this.getColor=function(){var _r = Math.random();if(_r <0.5){this.color ="#333";}else{this.color ="white";}}//初始化this.init=function(){this.getColor();}//绘制this.draw=function(){
context.fillStyle =this.color;
context.fillText(this.text,this.x,this.y);}}//画月亮functiondrawMoon(){var moon =newImage();
moon.src ="./moon.png";
moon.text="马永童"
context.drawImage(moon,-5,-10);}//页面加载的时候
window.onload=function(){init();//画星星for(var i =0; i < starCount; i++){var star =newStar();
star.init();
star.draw();
arr.push(star);}//画流星for(var i =0; i < rainCount; i++){var rain =newMeteorRain();
rain.init();
rain.draw();
rains.push(rain);}drawMoon();//绘制月亮playStars();//绘制闪动的星星playRains();//绘制流星}//星星闪起来functionplayStars(){for(var n =0; n < starCount; n++){
arr[n].getColor();
arr[n].draw();}setTimeout("playStars()",100);}/*流星雨开始*/varMeteorRain=function(){this.x =-1;this.y =-1;this.length =-1;//长度this.angle =30;//倾斜角度this.width =-1;//宽度this.height =-1;//高度this.speed =1;//速度this.offset_x =-1;//横轴移动偏移量this.offset_y =-1;//纵轴移动偏移量this.alpha =1;//透明度this.color1 ="";//流星的色彩this.color2 ="";//流星的色彩/****************初始化函数********************/this.init=function()//初始化{this.getPos();this.alpha =1;//透明度this.getRandomColor();//最小长度，最大长度var x = Math.random()*80+150;this.length = Math.ceil(x);// x = Math.random()*10+30;this.angle =30;//流星倾斜角
x = Math.random()+0.5;this.speed = Math.ceil(x);//流星的速度var cos = Math.cos(this.angle *3.14/180);var sin = Math.sin(this.angle *3.14/180);this.width =this.length * cos;//流星所占宽度this.height =this.length * sin;//流星所占高度this.offset_x =this.speed * cos;this.offset_y =this.speed * sin;}/**************获取随机颜色函数*****************/this.getRandomColor=function(){var a = Math.ceil(255-240* Math.random());//中段颜色this.color1 ="rgba("+ a +","+ a +","+ a +",1)";//结束颜色this.color2 ="black";}/***************重新计算流星坐标的函数******************/this.countPos=function()//{//往左下移动,x减少，y增加this.x =this.x -this.offset_x;this.y =this.y +this.offset_y;}/*****************获取随机坐标的函数*****************/this.getPos=function()//{//横坐标200--1200this.x = Math.random()* window.innerWidth;//窗口高度//纵坐标小于600this.y = Math.random()* window.innerHeight;//窗口宽度}/****绘制流星***************************/this.draw=function()//绘制一个流星的函数{
context.save();
context.beginPath();
context.lineWidth =1;//宽度
context.globalAlpha =this.alpha;//设置透明度//创建横向渐变颜色,起点坐标至终点坐标var line = context.createLinearGradient(this.x,this.y,this.x +this.width,this.y -this.height);//分段设置颜色
line.addColorStop(0,"white");
line.addColorStop(0.3,this.color1);
line.addColorStop(0.6,this.color2);
context.strokeStyle = line;//起点
context.moveTo(this.x,this.y);//终点
context.lineTo(this.x +this.width,this.y -this.height);
context.closePath();
context.stroke();
context.restore();}this.move=function(){//清空流星像素var x =this.x +this.width -this.offset_x;var y =this.y -this.height;
context.clearRect(x -3, y -3,this.offset_x +5,this.offset_y +5);// context.strokeStyle="red";// context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);//重新计算位置，往左下移动this.countPos();//透明度增加this.alpha -=0.002;//重绘this.draw();}}//绘制流星functionplayRains(){for(var n =0; n < rainCount; n++){var rain = rains[n];
rain.move();//移动if(rain.y > window.innerHeight){//超出界限后重来
context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
rains[n]=newMeteorRain();
rains[n].init();}}setTimeout("playRains()",2);}/*流星雨结束*/</script><styletype="text/css">body{background-color: black;}body, html{width: 100%;height: 100%;overflow: hidden;}</style></head><body><canvasid="stars"></canvas><div><imgsrc="./moon.png">
/div>
</body></html>
标签：
前端
本文转载自: https://blog.csdn.net/weixin_45851575/article/details/124605810
版权归原作者 最佳听众! 所有， 如有侵权，请联系我们删除。
版权归原作者 最佳听众! 所有， 如有侵权，请联系我们删除。