HTML5七夕情人节表白网页制作【绘制冬季下雪3D相册】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、精彩专栏
一、网页介绍
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码
,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑:任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
一、网页效果
二、代码展示
1.HTML代码
代码如下(示例):以下仅展示部分代码供参考~
<!--* @Author: your name* @Date: 2021-01-14 14:00:57* @LastEditTime: 2021-01-14 14:51:03* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \Canvas冬季下雪场景特效\index.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>❉html+css+js❉ 绘制冬季下雪3D相册</title><script src="js/jquery.min.js"></script><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/style1.css" /><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 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 id="contents"><canvas id="canvas">This browser cannot use a canvas.</canvas></div><script src="js/script.js"></script><divstyle="text-align: center;margin: 50px 0;font: normal 14px/24px 'MicroSoft YaHei';"></div><script>function init() {if (navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {var box = document.querySelectorAll(".box")[0];box.style.marginTop = "65%";box.style.marginLeft = "40%";}}$(function () {init();});</script></body>
</html>
2.CSS代码
/********************Common
********************/html, body {height: 100%;width: 100%;padding: 0;margin: 0;overflow:hidden;background: #74ebd5; /* fallback for old browsers */background: -webkit-linear-gradient(to bottom, #ACB6E5, #74ebd5); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to bottom, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}/********************Contents
********************/canvas#canvas {background: #74ebd5; /* fallback for old browsers */background: -webkit-linear-gradient(to bottom, #ACB6E5, #74ebd5); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to bottom, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
三、精彩专栏
看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。
HTML5七夕情人节表白网页制作【绘制冬季下雪3D相册】HTML+CSS+JavaScript html生日快乐祝福网页制作相关推荐
- HTML5七夕情人节表白网页(绘制冬季下雪3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤绘制冬季下雪3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心 这是程序 ...
- HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤渐变色 满天星空3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
- HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
- HTML5七夕情人节表白网页制作【情人节满屏爱心HTML5特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5七夕情人节表白网页制作【粉色的情人节爱心飞出ui特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5七夕情人节表白网页制作【生日蛋糕烟花动画CSS3特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5七夕情人节表白网页制作【结婚倒计时】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- HTML5期末大作业:网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页
HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...
最新文章
- android xutils3.0获取服务器图片,Android端使用xUtils3.0实现文件上传
- python 如何查看模块所有方法-如何查看python的模块
- ElementUI 中日期选择器总结
- 【Android】使用Assets目录中的图片资源
- [Python人工智能] 五.theano实现神经网络正规化Regularization处理
- SVN trunk branch tags 区别
- @Resource,@Autowired,@Inject3种注入方式详解
- php 多线程处理redis,redis的多线程
- 关于关闭SELinux的方法
- http中指定使用worker/prefork
- 两个精彩的比喻:吞吐量和延迟、信号量和互斥锁
- 二十二.香港大学火星实验室R3LIVE框架跑官方数据集
- C# 序列化之二进制
- UPNP解读2-含netbios,wins,DNS
- react-native开发安卓app相关使用总结
- html 模板 引用,模板引用说明
- 苹果iPhone手机升级系统内存空间变小不够如何解决?
- 重新定义RPA,重塑智能生产力 | 云扩科技RPA论坛成功举办
- 万字详解 Docker 镜像详细操作
- 把VBA转换成JAVA_请教,我用Excel中生成了Java代码,用VBA生成Jav
热门文章
- 《贝佐斯的数字帝国》读书笔记
- 【转】一位硕士毕业生三个月求职经历与经验的结晶
- 关于初学C语言的知识总结(1)——学习总结欢迎各位教导与指正
- DL基本知识(五)神经网络经典模型
- Springboot毕设项目坤坤网上商城0573k(java+VUE+Mybatis+Maven+Mysql)
- 苹果电脑(mac)上远程连接windows的软件
- jQurey 筛选 查找
- 计算机科学与应用论文,计算机科学与应用毕业论文.doc
- 报错解决:There-is-no-PasswordEncoder-mapped-for-the-id-null
- dubbo 获取不到本地地址,返回 127.0.0.1