情人节程序员用HTML网页表白【七夕情人节表白礼物-星空漫漫-(自动旋转)3D旋转相册-流星雨】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

本文主要是介绍情人节程序员用HTML网页表白【七夕情人节表白礼物-星空漫漫-(自动旋转)3D旋转相册-流星雨】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这是程序员表白系列中的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-08-05 09:38:42* @LastEditTime: 2021-08-06 10:05:30* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \(自动旋转)3D旋转相册-流星雨\index.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>520-❤</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/style1.css"><script src='https://cdn.bootcss.com/jquery/1.11.3/jquery.js'></script>
</head><body><!-- 背景S --><audio controls autoplay><source src="mp3/520.mp3"></audio><div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;"><div id="background" class="wall"></div><div id="midground" class="wall"></div><div id="foreground" class="wall"></div><div id="top" class="wall"></div></div><!-- 背景E --><!-- 3D旋转相册 --><div id="drag-container"><div id="spin-container"><!-- <img src="img/pexels-photo-206395.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""><img src="img/pexels-photo-1391498.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""><img src="img/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""><img src="img/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""><img src="img/pexels-photo-1382734.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""><img src="img/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> --><!-- 相片  可以放多张 6-10张合适--><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/7.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/9.jpg" alt=""><img src="img/10.jpg" alt=""><!-- 可放外链图片 --><!-- <a target="_blank" href="img/pexels-photo-139829.jpeg"><img src="img/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></a> --><!-- 告白视频 --><!-- <video controls autoplay="autoplay" loop><source src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4"></video> --><!-- 告白文字--><p>520-❤-小倩</p></div><div id="ground"></div></div><script type="text/javascript" src="js/index.js"></script><script type="text/javascript" src="js/script.js"></script></body></html>

2.CSS代码


* {margin: 0;padding: 0;
}html,
body {height: 100%;
}body {overflow: hidden;display: flex;background: #111;perspective: 1000px;transform-style: preserve-3d;
}#drag-container,
#spin-container {position: relative;display: flex;margin: auto;transform-style: preserve-3d;transform: rotateX(-10deg);
}#drag-container img,
#drag-container video {transform-style: preserve-3d;position: absolute;left: 0;top: 0;width: 130px;height: 200px;/* width: 100%; *//* height: 100%; */line-height: 200px;font-size: 50px;text-align: center;box-shadow: 0 0 8px #fff;-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}#drag-container img:hover,
#drag-container video:hover {box-shadow: 0 0 15px #fffd;-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}#drag-container p {font-family: Serif;position: absolute;top: 100%;left: 50%;transform: translate(-50%, -50%) rotateX(90deg);color: #fff;
}#ground {width: 900px;height: 900px;position: absolute;top: 100%;left: 50%;transform: translate(-50%, -50%) rotateX(90deg);background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent);
}#carousel-container {width: 100%;height: 100%;
}@keyframes spin {from {transform: rotateY(0deg);}to {transform: rotateY(360deg);}
}@keyframes spinRevert {from {transform: rotateY(360deg);}to {transform: rotateY(0deg);}
}

三、精彩专栏

看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。

这篇关于情人节程序员用HTML网页表白【七夕情人节表白礼物-星空漫漫-(自动旋转)3D旋转相册-流星雨】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/643703

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J