情人节程序员用HTML网页表白【时光不老,我们不散love520】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 三、精彩专栏
一、网页介绍
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
<!doctype html>
<html><head><meta charset="utf-8"/><meta name="keywords" content=""/><meta name="description" content=""/><title>520表白</title><stylestyle="text/css">*{margin:0;padding:0;}body{background:url("images/1.jpg");background-size:cover;}/*start top*/.top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷";color:#fff;<!--background:-webkit-linear-gradient(45deg,#ff0000,#ffcc00,#ffff99,#33ccff,#00ff33,#6600ff,#333399);-webkit-background-clip:text;-->}/*end top*//*start box*/.box{width:310px;height:310px;margin:auto;perspective:800px;/*景深*/}.box .pic{position:relative;transform-style:preserve-3d;/*3d环境*/ animation:play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/}.box ul li{list-style:none;position:absolute;top:0;left:0;}/*start box*//*定义一个关键帧*/@keyframes play{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}/*start text*/#text{width:500px;height:200px;color:#6fade1;margin:auto;font-size:24px;font-family:"方正喵呜体";}/*end text*/</style></head><body><!--start top--><div class="top"><marquee behavior="alternate">时光不老,我们不散</marquee></div><!--end top--><!--start box--><div class="box"><div class="pic"><ul><li><img src="images/1.png" width="" height="" alt=""/></li><li><img src="images/2.png" width="" height="" alt=""/></li><li><img src="images/3.png" width="" height="" alt=""/></li><li><img src="images/4.png" width="" height="" alt=""/></li><li><img src="images/5.png" width="" height="" alt=""/></li><li><img src="images/6.png" width="" height="" alt=""/></li></ul></div></div><!--end box--><!--start text--><div id="text"></div><!--end text--><embed src="music.mp3" hidden="true"/><script src="js/jquery.min.js"></script><!--雪花--><script src="js/snow.js"></script><script>$(".pic ul li").each(function(i){//遍历var deg=360/$(".pic ul li").size();//size个数//当前的li对象 添加css样式$(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});$.fn.snow({minSize:10,maxSize:15,newOn:500,flakeColor:"#ffffff"});});var i=0;var str="能够遇见你是我最大的幸运,有了你生活变得丰富多彩,有了你,世界变得如此迷人;你是我的世界,我的世界是你,对我来说,不是在最美好的时光遇见了你,而是遇见你后都是最美好的时光!";window.onload=function typing(){//获取divvar mydiv=document.getElementById("text");mydiv.innerHTML+=str.charAt(i);i++;var id=setTimeout(typing,100);if(i==str.length){clearTimeout(id);}}</script></body>
</html>
三、精彩专栏
看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。
情人节程序员用HTML网页表白【时光不老,我们不散love520】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript相关推荐
- 100款 ❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 【建议收藏】
120款❤HTML5七夕情人节表白网页源码❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100 ...
- HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)...
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 主页分为 漫画简 ...
- HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 主页分为 漫画简 ...
- 情人节程序员用HTML网页表白【嫦娥奔月(满屏泡泡)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5期末大作业:电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计 计算机毕设网 ...
- 情人节程序员用HTML网页表白【七夕告白(520气球)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【春娇-志明结婚邀请函】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【在一起计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【超具创意的网页生日快乐】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【制作属于我们的爱情相册网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
最新文章
- 困扰多日的C#调用Haskell问题竟然是Windows的一个坑
- web socket 心跳包的实现方案
- 用c语言输出数组中最小值,C语言.由键盘输入10个整数存入数组,输出最大值、最小值及它们的位置信息.并将最大、最小值位置互换后,再...
- 5G商用将在“十三五”时期内启动
- 章磊回答: 姚期智提出的百万富翁难题被破解? 多方安全计算MPC到底是个什么鬼?
- 2016-08-05
- T4生成多文件时,不生成自己
- python下载网上的文件
- linux停止rpc服务,Linux系统安装启动rpc服务,解决Loadrunner监控不到资源问题
- canvas绘图粒子扩散效果【原创】
- OFDM中保护间隔与循环前缀抵抗ISI…
- Android 自定义View(三)
- c语言程序设计题库 微盘下载,《C语言程序设计》题库及答案.pdf
- ColorPix最好用的屏幕取色器
- 阿里云中标“金关工程二期”大数据云项目,总金额8568万!(含标单)
- 怎样提高计算机内存,电脑物理内存不足怎么提高 电脑物理内存占用过高的解决方法...
- 2020大疆数字IC校招笔试题(3)——CMOS 反相器【CMOS逻辑】【MOS管】【PMOS】【NMOS】
- 组态中怎么使用mysql数据库,组态王写入MySQL数据库
- 【转】解决win10系统每次重启桌面图标排列混乱的问题!亲测有效!!
- 五一应该去哪里自驾游?哪里人最少,哪里不堵车?这份攻略你必须拥有。
热门文章
- jQuery 文档操作方法大全(也适用于 XML 文档和 HTML 文档)
- ROST情感分析的语法规则_基于「木兰」编译器,八行代码实现 quot;对于...中的quot;语法
- SVN安装及使用教程图文详解
- matlab 2014
- c语言中fread函数_使用示例的C语言中的fread()函数
- 基于单片机的贪吃蛇游戏设计仿真
- Lingo软件的使用
- 通过python程序调取摄像头画面
- acrobat PDF删除部分_迅捷PDF转换器3.2.0Mod会员版
- Web项目实战(购物商城项目简单的实现)