十款表白小特效 用代码表白 一个比一个浪漫 赶紧收藏起来吧!!! 文章简介 最近看了一街坊视频,问路人“你眼中的程序员是怎样的?”
然后一堆关键词就出来了“直男、宅、不懂浪漫、秃头、掉发、油头、戴眼镜、瘦、没得休息、枯燥乏味、不修边幅、做事有逻辑、学霸、认真、憨厚老实、可爱 哈哈哈哈哈哈”。
说程序员是直男,不可否认,大多数程序员都挺直,因为我们没有那么多弯弯绕绕。有心思兜圈子,不如回去写几行代码。
早年雷军说“我喜欢写代码,代码的世界很简单”
程序员,格子衫,不浪漫,直男,人傻钱多……一点都不懂得浪漫! 谁说我们不懂浪漫的? 不会制造惊喜的?真的是这样么?不不不 你错了 程序员一旦浪漫起来,真没其他人啥事了!!!
程序员的大多数时间都是面对电脑,没有乱七八糟的应酬,缺乏交际的程序员对待一份感情也会非常的认真。程序员也许在生活中会比较宅,但是千万不要说程序猿不懂浪漫。当你不开心了,他可以分分钟做出一个玫瑰花、心形、烟花等告白小程序给你制造小惊喜。
特效一(动图太大了 上传不了 只录了一部分)
部分代码如下
日为朝 月为暮 卿为朝朝暮暮
在这浮浮沉沉的大千世界里 我爱的只有三样
太阳 月亮和我爱的你
太阳带给我们白昼和希望 月亮带给我们夜幕和宁静
你与我的朝夕相伴 于我而言即是永恒 你是我一生挚爱
一生爱一人很难,也不丢人
最美的爱情愿景不就是"愿得一心人 白首不相离"嘛
如果可以请牢记当初的爱情承诺 记住最初的美好
愿岁月静好 浅笑安然 一切美好如约而至
特效二
代码如下:
//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
}
audioAutoPlay();
});
特效三
代码如下:
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2013, 2, 28);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!
Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
特效四
特效五
部分代码如下:
//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {
function audioAutoPlay() {
var audio = document.getElementById('audio');
audio.play();
}
audioAutoPlay();
});
特效六
代码如下:
*{margin:0; padding:0;}
body{ background-color: #1E1E1E; }
var hearts = [];
var canvas = document.getElementById('drawHeart');
var wW = window.innerWidth;
var wH = window.innerHeight;
// 创建画布
var ctx = canvas.getContext('2d');
// 创建图片对象
var heartImage = new Image();
heartImage.src = 'img/heart.svg';
var num = 100;
init();
window.addEventListener('resize', function(){
wW = window.innerWidth;
wH = window.innerHeight;
});
// 初始化画布大小
function init(){
canvas.width = wW;
canvas.height = wH;
for(var i = 0; i < num; i++){
hearts.push(new Heart(i%5));
}
requestAnimationFrame(render);
}
function getColor(){
var val = Math.random() * 10;
if(val > 0 && val <= 1){
return '#00f';
} else if(val > 1 && val <= 2){
return '#f00';
} else if(val > 2 && val <= 3){
return '#0f0';
} else if(val > 3 && val <= 4){
return '#368';
} else if(val > 4 && val <= 5){
return '#666';
} else if(val > 5 && val <= 6){
return '#333';
} else if(val > 6 && val <= 7){
return '#f50';
} else if(val > 7 && val <= 8){
return '#e96d5b';
} else if(val > 8 && val <= 9){
return '#5be9e9';
} else {
return '#d41d50';
}
}
function getText(){
var val = Math.random() * 10;
if(val > 1 && val <= 3){
return '爱你一辈子';
} else if(val > 3 && val <= 5){
return '感谢你';
} else if(val > 5 && val <= 8){
return '喜欢你';
} else{
return 'I Love You';
}
}
function Heart(type){
this.type = type;
// 初始化生成范围
this.x = Math.random() * wW;
this.y = Math.random() * wH;
this.opacity = Math.random() * .5 + .5;
// 偏移量
this.vel = {
x: (Math.random() - .5) * 5,
y: (Math.random() - .5) * 5
}
this.initialW = wW * .5;
this.initialH = wH * .5;
// 缩放比例
this.targetScale = Math.random() * .15 + .02; // 最小0.02
this.scale = Math.random() * this.targetScale;
// 文字位置
this.fx = Math.random() * wW;
this.fy = Math.random() * wH;
this.fs = Math.random() * 10;
this.text = getText();
this.fvel = {
x: (Math.random() - .5) * 5,
y: (Math.random() - .5) * 5,
f: (Math.random() - .5) * 2
}
}
Heart.prototype.draw = function(){
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
ctx.scale(this.scale + 1, this.scale + 1);
if(!this.type){
// 设置文字属性
ctx.fillStyle = getColor();
ctx.font = 'italic ' + this.fs + 'px sans-serif';
// 填充字符串
ctx.fillText(this.text, this.fx, this.fy);
}
ctx.restore();
}
Heart.prototype.update = function(){
this.x += this.vel.x;
this.y += this.vel.y;
if(this.x - this.width > wW || this.x + this.width < 0){
// 重新初始化位置
this.scale = 0;
this.x = Math.random() * wW;
this.y = Math.random() * wH;
}
if(this.y - this.height > wH || this.y + this.height < 0){
// 重新初始化位置
this.scale = 0;
this.x = Math.random() * wW;
this.y = Math.random() * wH;
}
// 放大
this.scale += (this.targetScale - this.scale) * .1;
this.height = this.scale * this.initialH;
this.width = this.height * 1.4;
// -----文字-----
this.fx += this.fvel.x;
this.fy += this.fvel.y;
this.fs += this.fvel.f;
if(this.fs > 50){
this.fs = 2;
}
if(this.fx - this.fs > wW || this.fx + this.fs < 0){
// 重新初始化位置
this.fx = Math.random() * wW;
this.fy = Math.random() * wH;
}
if(this.fy - this.fs > wH || this.fy + this.fs < 0){
// 重新初始化位置
this.fx = Math.random() * wW;
this.fy = Math.random() * wH;
}
}
function render(){
ctx.clearRect(0, 0, wW, wH);
for(var i = 0; i < hearts.length; i++){
hearts[i].draw();
hearts[i].update();
}
requestAnimationFrame(render);
}
特效七
代码如下:
body {
overflow: hidden;
margin: 0;
padding: 0;
background: hsla(242, 30%, 5%, 1);
}
canvas {
width: 100%;
}
/*
(Book REF) HTML5 Canvas Ch. 5: Math, Physics, and Animation ::: Uniform Circular Motion
By Steve Fulton and Jeff Fulton
*/
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.addEventListener('load', start, false);
var c,
$,
w,
h,
msX,
msY,
midX,
midY,
num = 650,
parts = [],
begin = 50,
repeat = 20,
end = Math.PI * 2,
force = null,
msdn = false;
function start() {
c = document.getElementById('canv');
$ = c.getContext('2d');
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
midX = w / 2;
midY = h / 2;
force = Math.max(w, h) * 0.09;
flow = begin;
window.requestAnimFrame(create);
run();
}
function run() {
window.requestAnimFrame(run);
go();
}
function Part() {
this.deg = 0;
this.rad = 0;
this.x = 0;
this.y = 0;
this.distX = 0;
this.distY = 0;
this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';
this.size;
}
function create() {
var n = num;
while (n--) {
var p = new Part();
p.deg = Math.floor(Math.random() * 360);
p.rad = Math.floor(Math.random() * w * 0.5);
p.x = p.distX = Math.floor(Math.random() * w);
p.y = p.distY = Math.floor(Math.random() * h);
p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));
parts[n] = p;
}
c.onmousemove = msmv;
c.onmousedown = msdn;
c.onmouseup = msup;
var int = setInterval(function () {
flow--;
if (flow === repeat) clearInterval(int);
}, 20);
}
function go() {
$.globalCompositeOperation = 'source-over';
$.fillStyle = 'hsla(242, 30%, 5%, .55)';
$.fillRect(0, 0, w, h);
$.globalCompositeOperation = 'lighter';
var mx = msX;
var my = msY;
var bounds = force;
if (msdn) {
bounds = force * 2;
}
var n = num;
while (n--) {
var p = parts[n];
var radi = Math.PI / 180 * p.deg;
p.distX = midX + p.rad * Math.cos(radi);
p.distY = midY + p.rad * Math.sin(radi) * 0.4;
if (mx && my) {
var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));
if (p.distX - mx > 0 &&
p.distX - mx < bounds &&
p.distY - my > 0 &&
p.distY - my < bounds) {
p.distX += react;
p.distY += react;
} else if (p.distX - mx > 0 &&
p.distX - mx < bounds &&
p.distY - my < 0 &&
p.distY - my > -bounds) {
p.distX += react;
p.distY -= react;
} else if (p.distX - mx < 0 &&
p.distX - mx > -bounds &&
p.distY - my > 0 &&
p.distY - my < bounds) {
p.distX -= react;
p.distY += react;
} else if (p.distX - mx < 0 &&
p.distX - mx > -bounds &&
p.distY - my < 0 &&
p.distY - my > -bounds) {
p.distY -= react;
p.distY -= react;
}
}
p.x += ((p.distX - p.x) / flow);
p.y += ((p.distY - p.y) / flow);
var x = p.x;
var y = p.y;
var s = p.size * (p.y * 1.5 / h);
if (s < 0.1) {
s = 0;
}
$.beginPath();
$.fillStyle = p.color;
$.arc(x, y, s, 0, end, true);
$.fill();
$.closePath();
var vary;
if (p.size < 2) {
vary = 4;
} else if (p.size < 3) {
vary = 3;
} else if (p.size < 4) {
vary = 2;
} else {
vary = 1;
}
vary *= (p.y / (h * 0.9));
p.deg += vary;
p.deg = p.deg % 360;
}
}
function msmv(e) {
var p = getPos(e.target);
var sX = window.pageXOffset;
var sY = window.pageYOffset;
msX = e.clientX - p.x + sX;
msY = e.clientY - p.y + sY;
}
function msdn(e) {
msdn = true;
}
function msup(e) {
msdn = false;
}
function getPos(el) {
var cosmo = {};
cosmo.x = el.offsetLeft;
cosmo.y = el.offsetTop;
while (el.offsetParent) {
el = el.offsetParent;
cosmo.x += el.offsetLeft;
cosmo.y += el.offsetTop;
}
return cosmo;
}
唉~只是我们平时不屑于表达,除非对自己喜欢的人。 我们要浪漫,就没其他人什么事儿!!!! ———————————————— 本文章为转载呦,以下为原文:
版权声明:本文为CSDN博主「王同学要努力」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/m0_46374969/article/details/119669839
======================================================================================================
今天的分享就到这里了,有问题可以在评论区留言,均会及时回复呀. 我是bling,未来不会太差,只要我们不要太懒就行, 咱们下期见.