-------------写在前面-------------
之前喜欢收集能美化网页的代码，比如给网页加个背景啦，给鼠标加个特效啦，来来回回也收集到了一些“使用简单”，“效果爆炸”的页面，给大家陆续分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o，之后还会分享许多干货，话不多说，先看组合好的效果
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); // 毫秒/1000
var 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>"
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--1200
this.x = Math.random() * window.innerWidth; //窗口高度
//纵坐标小于600
this.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>
9098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
