情人节程序员用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

相关文章

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出(如HTML、XML、邮件内容等),本文... 目录什么是 FreeMarker 模板?在 Spring Boot 中实现 FreeMarker 模板1. 环

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controll

Java中的工具类命名方法

《Java中的工具类命名方法》:本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名?先来几个例子几种命名方式的比较到底如何命名 ?总结Java中的工具类究竟如何命名?先来几个例子JD

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》:本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证(1)创建配置类(2)验证内存身份认证2.JDBC身份认证(1)数据准备 (2)配置依

SpringBoot整合OpenFeign的完整指南

《SpringBoot整合OpenFeign的完整指南》OpenFeign是由Netflix开发的一个声明式Web服务客户端,它使得编写HTTP客户端变得更加简单,本文为大家介绍了SpringBoot... 目录什么是OpenFeign环境准备创建 Spring Boot 项目添加依赖启用 OpenFeig

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖