纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作

DW网页设计与制作

于 2023-03-19 11:51:06 发布

阅读量245

点赞数 1

分类专栏：静态网页设计文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_38517951/article/details/129648664

版权

这篇博客介绍了如何使用HTML、CSS和JavaScript制作一个3D动态相册，特别适合七夕情人节表白。网页允许用户自定义背景音乐、文字和图片，只需使用常见的HTML编辑软件即可进行修改。文章包含代码展示，帮助读者理解并实现这个浪漫的3D流星雨旋转相册效果。

摘要由CSDN通过智能技术生成

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>流星雨3D旋转相册</title>
	<link rel="stylesheet" href="style.css">
	<style>
		*{
     margin: 0;padding: 0;}
		html,body{
     height: 100%;}
		body{
     
			display: flex;
			perspective: 1000px;
			transform-style: preserve-3d;
			/* background-image: url(./img/3.png); */
			background: #0c0c0c;
			height:100%;
			width: 100%;
		}
		#box{
     
			z-index: 9999;
			position: relative;
			display: flex;
			width: 130px;
			height: 200px;
			margin: auto;
			transform-style: preserve-3d; 
			transform: rotateX(-10deg);
		}
		#box > div{
     
			transform-style: preserve-3d; 
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			line-height: 200px;
			font-size: 50px;
			text-align: center;
			box-shadow:0 0 10px #fff;
			-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
		}
		
		#box p{
     
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 1200px;
			height: 1200px;
			background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
			border-radius: 50%;
			transform: rotateX(90deg) translate3d(-600px,0,-105px);
		}
		/* 下雨特效 */
			#codepen-link {
     
				position: absolute;
				bottom: 30px;
				right: 30px;
				height: 40px;
				width: 40px;
				z-index: 10;
				border-radius: 50%;
				box-sizing: border-box;
				background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
				background-position: center center;
				background-size: cover;
				opacity: 0.5;
				-webkit-transition: all 0.25s;
				transition: all 0.25s;
			}
	
			#codepen-link:hover {
     
				opacity: 0.8;
				box-shadow: 0 0 6px #efefef;
			}
	</style>

</head>
<body>
	<audio autoplay="autopaly">
		<source src="renxi.mp3" type="audio/mp3" />
	  </audio>
	<!-- 相册 -->
<div id="box">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<p></p>
</div>
<!-- 流星 -->
<div class="stars">
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div>
	<div class="star"></div

最低0.47元/天解锁文章

DW网页设计与制作

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作

1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~2.CSS代码三、精彩专栏看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。
复制链接

扫一扫