                                                                                 -------------写在前面-------------

之前喜欢收集能美化网页的代码，比如给网页加个背景啦，给鼠标加个特效啦，来来回回也收集到了一些“使用简单”，“效果爆炸”的页面，给大家陆续分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o，之后还会分享许多干货，话不多说，先看组合好的效果

文章目录

1 不同语言滚动的我爱你
2爱心动画
3时钟转动
4爱心特效
5流星雨

1 不同语言滚动的我爱你

代码

<html><head><meta charset="UTF-8"><style type="text/css">body{background:#43EEF4;texta-align:center;color:pink;width: 100%;}</style></head><body><marquee  width="160px" direction="left" behavior="scroll" scrollamount="12" hspace="800px">w我爱你</marquee><br><marquee width="220px" direction="left" behavior="scroll" scrollamount="22" hspace="800px"><h4>我爱你</h4></marquee><br> <marquee width="220px" direction="right" behavior="scroll" scrollamount="13" hspace="800px"><h3>사랑해</h3></marquee><br><marquee width="220px" direction="left" behavior="scroll" scrollamount="24" hspace="780px">我爱你</marquee><br> <marquee width="260px" direction="right" behavior="scroll" scrollamount="15" hspace="780px"><h5>我爱你</h5></marquee><br><marquee width="260px" direction="left" behavior="scroll" scrollamount="16" hspace="760px">我爱你</marquee><br><marquee width="260px" direction="right" behavior="scroll" scrollamount="17" hspace="760px">我爱你</marquee><br><marquee width="320px" direction="left" behavior="scroll" scrollamount="18" hspace="740px"><h5>love</h5></marquee><br><marquee width="320px" direction="right" behavior="scroll" scrollamount="29" hspace="740px">我爱你</h1></marquee><br><marquee width="320px" direction="left" behavior="scroll" scrollamount="20" hspace="720px">我爱你</marquee><br>  <marquee width="360px" direction="right" behavior="scroll" scrollamount="10" hspace="720px">愛する</marquee><br> <marquee width="360px" direction="left" behavior="scroll" scrollamount="21" hspace="700px"><h1>我爱你</h1></marquee><br><marquee width="360px" direction="right" behavior="scroll" scrollamount="11" hspace="700px">love</marquee><br> <marquee width="400px" direction="left" behavior="scroll" scrollamount="18" hspace="6900px">我爱你</marquee><br><marquee width="400px" direction="right" behavior="scroll" scrollamount="18" hspace="680px">EU te amo</marquee><br><marquee width="360px" direction="left" behavior="scroll" scrollamount="16" hspace="690px">我爱你</marquee><br><marquee width="360px" direction="right" behavior="scroll" scrollamount="16" hspace="700px"><h4>我爱你</h4></marquee><br><marquee width="360px" direction="left" behavior="scroll" scrollamount="16" hspace="700px">love</marquee><br><marquee width="320px" direction="right" behavior="scroll" scrollamount="14" hspace="7200px"><h2>我爱你</h2></marquee><br><marquee width="320px" direction="left" behavior="scroll" scrollamount="15" hspace="7200px">Ich liebe dich</marquee><br> <marquee width="320px" direction="right" behavior="scroll" scrollamount="16" hspace="740px">我爱你</marquee><br><marquee width="260px" direction="left" behavior="scroll" scrollamount="18" hspace="740px">love</marquee><br> <marquee width="260px" direction="right" behavior="scroll" scrollamount="17" hspace="760px">我爱你</marquee><br><marquee width="260px" direction="left" behavior="scroll" scrollamount="16" hspace="760px"><h2>我爱你</h2></marquee><br><marquee width="220px" direction="right" behavior="scroll" scrollamount="15" hspace="780px">我爱你</marquee><br><marquee width="220px" direction="left" behavior="scroll" scrollamount="14" hspace="780px">我爱你</marquee><br><marquee width="220px" direction="right" behavior="scroll" scrollamount="13" hspace="800px">Je t' aime</marquee><br><marquee width="160px" direction="left" behavior="scroll" scrollamount="12" hspace="800px">我爱你</marquee><br><embed src="yinyue.mp3" width="0" height="0" autostart="ture" loop="ture"></embed>    </body>
</html>

2爱心动画

代码

<html>
<head>
<meta charset="UTF-8">
<title></title><style type="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><div class="heart"> </div>
</body>
</html>

3时钟转动

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="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>
<div id="wrapper"><div class="timebox yuebox" id="yueBox"></div><div class="timebox riqiBox" id="riqiBox"></div><div class="timebox hourbox" id="hourbox"></div>    <div class="timebox minutebox" id="minutebox"></div>    <div class="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");let findSiblings = 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 ;};
let removeSiblingClass =function( tag ){let sb = findSiblings( tag );for(let i=0 ;  i <= sb.length-1 ; i++){sb[i].className = "";}};let initMonth = function(){for(let i=1; i<=12; i++){let span = document.createElement("span");span.innerHTML = i+"月";yueBox.appendChild( span );}};let initDate = function(){for(let i=1; i<=31; i++){let span = document.createElement("span");span.innerHTML = i+"日";riqiBox.appendChild( span );}};let initHour = 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 );}};let initMinute = 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 );}};let initSecond = 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 );} };let changeTime = function(tag){tag.className = "on";             removeSiblingClass( tag );};let initRili = function(){initMonth();initDate();initHour(); initMinute();initSecond();};let  showNow = 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] );};let textRound = 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)" }};let rotateTag = function(tag , deg){tag.style.transform = "rotate("+deg+"deg)";};let main = function(){initRili();setInterval(function(){let mydate = new Date();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 = new Date();                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爱心特效

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>love</title>
<link href="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>
<h1 id="h1"></h1>
<canvas></canvas> <script>var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d");var ww,wh;function onResize(){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;
function onMove(e){mouseMoved = true;if(e.type === "touchmove"){hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));}else{hearts.push(new Heart(e.clientX, e.clientY));hearts.push(new Heart(e.clientX, e.clientY));}
}var Heart = 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();
};function render(a){requestAnimationFrame(render);hearts.push(new Heart())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=function starttime(){time(h1,'2022,5,6');     // 在一起的时间ptimer = setTimeout(starttime,1000); // 添加计时器
}function time(obj,futimg){var nowtime = new Date().getTime(); // 现在时间转换为时间戳var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳var msec = nowtime-futruetime; // 毫秒 未来时间-现在时间var time = (msec/1000);  // 毫秒/1000var day = parseInt(time/86400); // 天  24*60*60*1000var 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>"return true;}</script></body>
</html>

5流星雨

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>流星雨</title><script>var context;var arr = new Array();var starCount = 800;var rains = new Array();var rainCount = 20;function init() {var stars = document.getElementById("stars");windowWidth = window.innerWidth; //当前的窗口的高度stars.width = windowWidth;stars.height = window.innerHeight;context = stars.getContext("2d");}//创建一个星星对象var Star = 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);}}//画月亮function drawMoon() {var moon = new Image();moon.src = "./moon.png";moon.text="马永童"context.drawImage(moon, -5, -10);}//页面加载的时候window.onload = function () {init();
//画星星for (var i = 0; i < starCount; i++) {var star = new Star();star.init();star.draw();arr.push(star);}
//画流星for (var i = 0; i < rainCount; i++) {var rain = new MeteorRain();rain.init();rain.draw();rains.push(rain);}drawMoon();//绘制月亮playStars();//绘制闪动的星星playRains();//绘制流星}//星星闪起来function playStars() {for (var n = 0; n < starCount; n++) {arr[n].getColor();arr[n].draw();}setTimeout("playStars()", 100);}/*流星雨开始*/var MeteorRain = 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();}}//绘制流星function playRains() {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] = new MeteorRain();rains[n].init();}}setTimeout("playRains()", 2);}/*流星雨结束*/</script><style type="text/css">body {background-color: black;}body, html {width: 100%;height: 100%;overflow: hidden;}</style>
</head>
<body><canvas id="stars"></canvas>
<div ><img src="./moon.png">/div>
</body>
</html>

拿来就能用的五个前端表白特效（免费）相关推荐

五种前端布局之float布局
五种前端基本布局---table布局.float布局.absolute布局.flexbox布局.grid布局 float布局特性 float布局的优缺点缺点优点 float布局特性 float 属 ...
五、前端开发-JavaScript基础
五.前端开发语言体系-JavaScript基础文章目录五.前端开发语言体系-JavaScript基础 JavaScript基础变量.值和类型运算符和表达式语句数组函数和对象严格模式类 ...
开发者论坛一周精粹(第五十七期) 阿里云免费套餐个人备案备注
开发者论坛每周选取精华内容总结,精选论坛优质贴,每周更新一期,方便大家阅读! 调用阿里云短信接口报错java.lang.UnsupportedOperationException tanjw 摘要:最 ...
五款最佳VMware vSphere免费管理工具
http://virtual.51cto.com/art/201407/444416.htm 东西的价值和价钱相关的理论并不适用于所有情况,特别是当你在选择VMware vSphere管理工具时.对于 ...
五万字前端面试宝典——前端百题斩（上）新鲜出炉
从2021年5月9号开始更新<前端百题斩>,目前终于取得了阶段性成果,<前端百题斩>上册已经更新完毕,内容包括JS基础篇.浏览器篇.网络篇,共计50个章节,5万多字.关注公众号 ...
Threejs专用天空盒素材，五种天空盒素材免费下载
使用Threejs开发web3D场景,模拟现实环境让场景更有真实感会用到天空盒.实际相当于创建了一个很大的立方体,并且将摄像机和场景中的物体都在这个立方体里面,这样看到的就是模拟的真实环境. 我整理了 ...
html懒人编辑器,前端老司机分享——五个前端代码编辑器
工欲善其事,必先利其器.但我最开始接触网页的时候,人们普遍认为能用记事本写HTML和CSS的才是大神. 那时也没有前端这一说法,随着网页越来越复杂用记事本的开发效率就太低了,也就有了前端代码编辑器的出 ...
五分钟快速搭建Serverless免费邮件服务
1. 引言本文将带你快速基于 Azure Function 和 SendGrid 构建一个免费的Serverless(无服务器)的邮件发送服务,让你感受下Serverless的强大之处. 该服务可以 ...
Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）
上文回顾 :Hybird框架UI重构之路:四.分而治之这里讲述在开发的过程中,一些HTML.CSS的关键点. 单页模式的页面结构在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中 ...

拿来就能用的五个前端表白特效（免费）

文章目录

1 不同语言滚动的我爱你

2爱心动画

3时钟转动

4爱心特效

5流星雨

拿来就能用的五个前端表白特效（免费）相关推荐

最新文章

热门文章