• HTML5七夕情人节表白代码 (动态3D相册) HTML+CSS+JS

    ❤ 精彩专栏推荐👇🏻👇🏻👇🏻
    💂 作者主页: 【进入主页—🚀获取更多源码】
    🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
    🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
    七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

    📂文章目录

    二、📚网站介绍

    📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

    📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
    其中：
    （1）📜html文件包含：其中index.html是首页、其他html为二级页面；
    （2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
    （3）📄 js文件包含：页面炫酷效果实现

    三、🔗网站效果

    ▶️1.视频演示

    97-时光不老,我们不散love520

    🧩 2.图片演示

    在这里插入图片描述

    四、💒 网站代码

    🧱HTML结构代码

    
doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<title>520表白title>
		<style style="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>
		
		<div class="top">
			<marquee behavior="alternate">时光不老，我们不散marquee>
		div>
		
		
		<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>
		
		
		<div id="text">div>
		
		<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(){
				//获取div
				var mydiv=document.getElementById("text");
				mydiv.innerHTML+=str.charAt(i);
				i++;
				var id=setTimeout(typing,100);
				if(i==str.length){
					clearTimeout(id);
				}
			}
		script>
	body>
html>




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    五、🎁更多源码

    1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

    📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

  • 相关阅读:
    史上超强最常用SQL语句大全
    2—C++程序设计：C++简单程序设计
    ssh远程安装teamviewer与正在连接...问题解决方法
    Biotin-PEG4-IC（TFP ester/amine/NHS Ester/azide）特性分享
    【前端验证】关于那道经典概率题，用UVM环境来仿真下是男孩的概率
    WeakHashMap 和 HashMap 的区别是什么，何时使用？
    Cisco（十一）—STP
    Xray联动burp进行渗透测试
    Java基础——递归
    BLDC 四大方案
  • 原文地址：https://blog.csdn.net/qq_38514354/article/details/127331269