位置: IT常识 - 正文

125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript(程序员神器)

编辑:rootadmin
125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript

推荐整理分享125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript(程序员神器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:【程序员 】,125款程序员专属服装,程序员v2,程序员v2,125款程序员专属服务,125款程序员专属头像,125款程序员专属头像,125款程序员专属头像,内容如对您有帮助,希望把文章链接给更多的朋友!

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!

📂文章目录二、📚网站介绍三、🔗网站效果🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

125款程序员专属情人节表白网站【建议收藏】HTML+CSS+JavaScript(程序员神器)

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

三、🔗网站效果🧩 2.图片演示

下面以樱花雨3D动态相册源码演示为例

html七夕情人节表白网页制作

四、💒 网站代码🧱HTML结构代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.min.js"></script> <link type="text/css" href="./css/style.css" rel="stylesheet" /> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .container { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #000000; } </style> </head> <body> <audio autoplay="autopaly"> <source src="renxi.mp3" type="audio/mp3" /> </audio> <div id="jsi-cherry-container" class="container"> <div class="box"> <ul class="minbox"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ol class="maxbox"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> </div> <script> setParameters: function() { this.$container = $('#jsi-cherry-container'); this.width = this.$container.width(); this.height = this.$container.height(); this.context = $('<canvas />') .attr({ width: this.width, height: this.height }) .appendTo(this.$container) .get(0) .getContext('2d'); this.cherries = []; this.maxAddingInterval = Math.round( (this.MAX_ADDING_INTERVAL * 1000) / this.width ); this.addingInterval = this.maxAddingInterval; }, reconstructMethods: function() { this.render = this.render.bind(this); }, render: function() { requestAnimationFrame(this.render); this.context.clearRect(0, 0, this.width, this.height); this.cherries.sort(function(cherry1, cherry2) { return cherry1.z - cherry2.z; }); for (var i = this.cherries.length - 1; i >= 0; i--) { if (!this.cherries[i].render(this.context)) { this.cherries.splice(i, 1); } } if (--this.addingInterval == 0) { this.addingInterval = this.maxAddingInterval; this.cherries.push(new CHERRY_BLOSSOM(this, false)); } } }; var CHERRY_BLOSSOM = function(renderer, isRandom) { this.renderer = renderer; this.init(isRandom); }; CHERRY_BLOSSOM.prototype = { FOCUS_POSITION: 300, FAR_LIMIT: 600, MAX_RIPPLE_COUNT: 100, RIPPLE_RADIUS: 100, SURFACE_RATE: 0.5, SINK_OFFSET: 20, init: function(isRandom) { this.x = this.getRandomValue( -this.renderer.width, this.renderer.width ); this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5; this.z = this.getRandomValue(0, this.FAR_LIMIT); this.vx = this.getRandomValue(-2, 2); this.vy = -2; this.theta = this.getRandomValue(0, Math.PI * 2); this.phi = this.getRandomValue(0, Math.PI * 2); this.psi = 0; this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300); this.opacity = 0; this.endTheta = false; this.endPhi = false; this.rippleCount = 0; var axis = this.getAxis(), theta = this.theta + (Math.ceil( -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy ) * Math.PI) / 500; theta %= Math.PI * 2; this.offsetY = 40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1); this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate; this.entityColor = this.renderer.context.createRadialGradient( 0, 40, 0, 0, 40, 80 ); this.entityColor.addColorStop( 0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)' ); context.save(); context.globalAlpha = this.opacity; context.fillStyle = this.shadowColor; context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)'; context.translate( axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y) ); context.rotate(Math.PI - this.theta); context.scale(axis.rate * -Math.sin(this.phi), axis.rate); context.translate(0, this.offsetY); this.renderCherry(context, axis); context.restore(); } context.save(); context.fillStyle = this.entityColor; context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)'; context.translate( axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate) ); context.rotate(this.theta); context.scale(axis.rate * Math.sin(this.phi), axis.rate); context.translate(0, this.offsetY); this.renderCherry(context, axis); context.restore(); if (this.y <= -this.renderer.height / 4) { if (!this.endTheta) { for ( var theta = Math.PI / 2, end = (Math.PI * 3) / 2; theta <= end; theta += Math.PI ) { if (this.theta < theta && this.theta + Math.PI / 200 > theta) { this.theta = theta; this.endTheta = true; break; } } } if (!this.endPhi) { for ( var phi = Math.PI / 8, end = (Math.PI * 7) / 8; phi <= end; phi += (Math.PI * 3) / 4 ) { if (this.phi < phi && this.phi + Math.PI / 200 > phi) { this.phi = Math.PI / 8; this.endPhi = true; break; } } } } if (!this.endTheta) { if (axis.y == this.thresholdY) { this.theta += (Math.PI / 200) * (this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < (Math.PI * 3) / 2) ? 1 : -1); } else { this.theta += Math.PI / 500; } this.theta %= Math.PI * 2; } if (this.endPhi) { if (this.rippleCount == this.MAX_RIPPLE_COUNT) { this.psi += this.dpsi; this.psi %= Math.PI * 2; } } else { this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500); this.phi %= Math.PI; } if (this.y <= -this.renderer.height * this.SURFACE_RATE) { this.x += 2; this.y = -this.renderer.height * this.SURFACE_RATE; } else { this.x += this.vx; this.y += this.vy; } return ( this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5 ); } }; $(function() { RENDERER.init(); }); </script> </body></html>🏠CSS样式代码@charset "utf-8";* { margin: 0; padding: 0;}body { max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; position: absolute; margin-left: auto; margin-right: auto;}li { list-style: none;}.box { width: 200px; height: 200px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; position: absolute; margin-left: 42%; margin-top: 22%; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(13deg); -webkit-animation: move 5s linear infinite;}.minbox { width: 100px; height: 100px; position: absolute; left: 50px; top: 30px; -webkit-transform-style: preserve-3d;}.minbox li { width: 100px; height: 100px; position: absolute; left: 0; top: 0;}.minbox li:nth-child(1) { background: url(../img/01.png) no-repeat 0 0; -webkit-transform: translateZ(50px);}.box:hover ol li:nth-child(3) { -webkit-transform: rotateX(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child(4) { -webkit-transform: rotateX(90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child(5) { -webkit-transform: rotateY(-90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}.box:hover ol li:nth-child(6) { -webkit-transform: rotateY(90deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px;}@keyframes move { 0% { -webkit-transform: rotateX(13deg) rotateY(0deg); } 100% { -webkit-transform: rotateX(13deg) rotateY(360deg); }}五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

本文链接地址:https://www.jiuchutong.com/zhishi/297279.html 转载请保留说明!

上一篇:css鼠标移入变成小手(css鼠标移入移出切换事件)

下一篇:postman教程(postman操作流程)

  • 城建税和教育费附加
  • 金税开票软件怎么修改开票人
  • 税前扣除凭证按照用途分为哪些
  • 二手车经纪公司和中介的区别
  • 分支机构注销后往来账如何处理
  • 电子税务局怎么登录
  • 什么叫调表不调帐
  • 公司现金支付管理办法
  • 土地增值税可扣除的税金有哪些
  • 研究开发费用的加计扣除100%
  • 预提费用 会计准则
  • 企业注销建造师流程
  • 旧设备进口关税
  • 税务局加强企业所得税管理
  • 工程项目立项前包括哪几个过程
  • 营改增后房地产企业增值税税收筹划存在问题
  • 年末如何计提企税分录
  • 转股交印花税的优惠政策
  • 建筑工程项目部由哪几个部门组成
  • 水利建设基金的计税依据及税率
  • 多认证的增值税怎么处理
  • 积分小技巧
  • 接受无形资产投资进项税
  • 委托代收款
  • 打官司收案是什么意思
  • 发票认证后失控
  • 小规模纳税人补开发票如何申报增值税
  • 冲暂估怎么做分录
  • 股票股利和现金股利的共同点
  • 税前扣除税后扣除
  • windows11 微软
  • win11安装程序提示非管理员账号
  • jdk1.8环境变量设置
  • 天津市残保金缴纳标准
  • 企业接受现金捐赠如何开具发票
  • php常用设计模式(大总结)
  • echarts获取不到宽和高
  • php require include
  • 与资产相关的政府补助所得税处理
  • 最有艺术气质的动物
  • yii2框架结构
  • css前端还是后端
  • Vue2 Element description组件 列合并
  • 企业期末结转本期实现的各项收入
  • RocketMQ-02
  • 律师费怎么要回来
  • react生命周期执行顺序
  • MySQL里Create Index 能否创建主键 Primary Key
  • 营业收入净额是利润表的哪个数
  • 会计和税法折旧年限不相同
  • 装修公司财务报表图片
  • 免税企业税金及附加计算
  • 购房补贴退契税多久到账
  • 销售货物时发票多开了金额如何处理?
  • 公司账户转账给个人要交税吗
  • 自己做的房子可以办房产证吗
  • 上个月的发票可以作废吗
  • 什么是小微企业
  • 机器设备进项税率
  • 银行对账单怎么打印
  • 什么是固定资产清理
  • sql数据分类
  • win10预览版21277
  • 详述社会体育学科的研究对象
  • win2008 安装无线服务卡住了
  • awk两个文件关联合并
  • centos创建一个文件
  • 快速解决便秘的小妙招
  • linux如何创建ftp
  • 凭据管理器 win10
  • linux下忘记mysql密码的几种找回方法(推荐)
  • ExtJS4 表格的嵌套 rowExpander应用
  • python opencv
  • 如何执行perl脚本
  • linux触控
  • android4.4.2升级包
  • js新开一个窗口
  • jquery的$作用
  • 光伏电站电力监控系统
  • 土地增值税清算管理规程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设