html 代码礼物，特效，圣诞树，纪念天数

一，圣诞树

<!DOCTYPE HEML PUBLIC>
<html><head><meta charset="utf-8"><style>html, body{width: 100%;height: 100%;margin: 0;padding: 0;border: 0;}div{margin: 0;padding: 0;border: 0;}.nav{position: absolute;top: 0;left: 0;width: 100%;height: 27px;background-color: white;color: black;text-align: center;line-height: 25px;}a{color: black;text-decoration: none;border-bottom: 1px dashed black;}a:hover{border-bottom: 1px solid red;}.previous{float: left;margin-left: 10px;}.next{float: right;margin-right: 10px;}.green{color: green;}.red{color: red;}textarea{width: 100%;height: 100%;border: 0;                padding: 0;                margin: 0;                padding-bottom: 20px;              }            .block-outer            {                float: left;                width: 22%;                height: 100%;                padding: 5px;                border-left: 1px solid black;                margin: 30px 3px 3px 3px;                }            .block-inner            {                height: 68%;                }            .one            {                border: 0;                }</style>      </head>
<body marginwidth="0" marginheight="0"><canvas id="c" height="356" width="446"><script>              var collapsed = true;            function toggle()            {                  var fs = top.document.getElementsByTagName('frameset')[0];                var f = fs.getElementsByTagName('frame');                if (collapsed)                {                      fs.rows = '250px,*';                    fs.noResize = false;                    f[0].noResize = false;                      f[1].noResize = false;}                 else{                      fs.rows = '30px,*';fs.noResize = true;f[0].noResize = true;f[1].noResize = true;}                  collapsed = !collapsed;            }</script>  <script>              var b = document.body;            var c = document.getElementsByTagName('canvas')[0];            var a = c.getContext('2d');            document.body.clientWidth;</script>  <script>M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){    width=height=k?32:W=446;        with(getContext('2d'))        if(k>10|!k)        for(        font='60px Impact',        V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':        V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;        )    beginPath(        fill(            arc(                U-i/3,                24-i/2,                k==13?4-(i++)/2:8-i++,                0,                M.PI*2,1                )            )            );else for(;x=T(i),        y=Q()*2-1,        D=x*x+y*y,        B=E(D-x/.9-1.5*y+1),        R=67*(B+1)*(L=k/9+.8)>>1,        i++<W;        )if(D<1)    beginPath(        strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'        ),        moveTo(U+x*8,U+y*8),        lineTo(U+x*U,U+y*U),        stroke();for(        y=H=k+E(k++)*25,        R=Q()*W;        P=3,j<H;        )    J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){    A=T(D-11);    if(l)return(        m[2]-l[2])*A+(l[0]-m[0])*T(D);        a.clearRect(0,0,W,W);        J.sort(G);for(        i=0;        L=J[i++];        a.drawImage        (            M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)    )    {        if(i==2e3)        a.fillText        (            'Happy Christmas!',            U,345);if(!(i%7))        a.drawImage        (M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}    D+=.02},1)</script>
</body>
</html>

1.1 效果：

二，纪念天数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨年表白</title><!-- 这是网页标题 -->
<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> <!--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,'2019/7/1');     // 刚在一起的时间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*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秒为一整份 取余 剩下秒数obj.innerHTML="臭臭<br>咱俩在一起的时间已经：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>2022即将来临,真爱来了，我们要好好把握。<br>不管面临多大的压力,不管前面的路如何崎岖.<br>不管经历过什么,我仍坚信最浪漫的事就是和你一起慢慢变老.<br>相信中间的计时器,将永远继续下去,直至数据溢出.</span>"return true;}
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=1811921555.mp3">
</audio>
</body>
</html>

2.1 效果

html 代码礼物，特效，圣诞树，纪念天数相关推荐

SVGA-web实践(开发礼物特效)
在实践过bodymovin之后,发现如果需要在动画里面加逻辑比较麻烦,效果也不好.因此后面找到了另外一个开源的工具,就是YY开源出来的svga,有android,ios,web版本,还有对应的AE插件 ...
圣诞夜，让你的代码都变成圣诞树吧！
关注TJ君,回复"武功秘籍"免费获取计算机宝典书籍今天是圣诞夜,有多少小伙伴是出去过节了呢?当然肯定有更多的小伙伴是等着和TJ君一起分享圣诞夜的编码快乐! 既然是圣诞夜,那我们今 ...
html5酷炫表白代码_七夕表白代码,樱花特效+爱心特效+花瓣+评论留言功能等
___2020/8/25七夕不是快到了嘛,寻思最近没啥活,于是闲暇时间扒一套JQuery代码,做了一下优化 ------- 超级好看的花瓣表白网页源码, ___然后通过gitee(码云)搭建了一套个人 ...
直播svga礼物特效设计
首先叙述下直播礼物对直播平台有什么价值? 1.礼物是平台营收的核心. 用户购买礼物给主播,会涉及到真金白锒结算,礼物效果会决定着主播收益,也会给平台带来一定的收益. 2.实时互动性要求高. 用户送礼时 ...
svga插件_如何压缩SVGA格式的礼物特效文件
前阵子看到一些使用canvas或者jQuery插件库完成的动画,例如: 也可以实现非常棒的效果,还具备一些小的互动.但大多时候,出于工作配合以及对效果的把控,动效/特效还是需要由设计师自己来完成.而 ...
html和js画圣诞树图片,教你如何把JavaScript代码写成圣诞树
我们使用了自己写的一个nodejs库,如果您要实现这样的效果,只需要按照下面第一章节的方法即可.当然您也可以在线压缩代码: 下面分两章节,分别讲解如何使用js2image这个库和 js2image这 ...
直播礼物特效-快手直播礼物分析
#直播礼物特效-快手直播礼物分析今天重点分析快手的直播礼物,在此过程中可能会不停地提及抖音,因为这两个平台实在是有很多相似的地方,包括直播平台的礼物类型以及设计. 礼物的展现形势方面快手和抖音走的 ...
直播礼物特效-B站直播礼物分析
直播礼物特效-B站直播礼物分析今天着重分析b站的直播礼物,因为b站一直属于自我风格比较突出的类型,而且在直播方面一直也做得很不错,虽然直播算不上是主营业务,但是主播数量也很可观. b站最大的优点在于 ...
直播SVGA礼物特效文件如何压缩
首先说一下SVGA和JSON文件的区别,作为两者的导出工具,Bodymovin和SVGAConverter是AE对接app过程中最常用的两个插件: Bodymovin:用于导出JSON文件,如果由矢量 ...

html 代码礼物，特效，圣诞树，纪念天数

一，圣诞树

1.1 效果：

二，纪念天数

2.1 效果

html 代码礼物，特效，圣诞树，纪念天数相关推荐

最新文章

热门文章

html 代码礼物，特效 ，圣诞树，纪念天数

一，圣诞树

1.1 效果：

二，纪念天数

2.1 效果

html 代码礼物，特效 ，圣诞树，纪念天数相关推荐

最新文章

热门文章

html 代码礼物，特效，圣诞树，纪念天数

html 代码礼物，特效，圣诞树，纪念天数相关推荐