520表白代码

最新推荐文章于 2024-03-27 11:59:51 发布

置顶皮小孩ls

最新推荐文章于 2024-03-27 11:59:51 发布

阅读量1.6w

点赞数 15

分类专栏： html实例表白文章标签： css html js 表白 520

本文链接：https://blog.csdn.net/qq_44809707/article/details/116666940

版权

html实例同时被 2 个专栏收录

25 篇文章 87 订阅

订阅专栏

表白

14 篇文章 23 订阅

订阅专栏

女朋友生日快乐代码—>>>html生日快乐代码
html表白代码大全—>>>html表白代码大全
个人主页地址：皮小孩的个人主页

很多朋友想几个代码组合在一起，于是我做了这个效果。中间是爱心包围的照片（照片可以换多张），旁边是文字，另外还有背景音乐。
完整项目地址—>>>520爱心表白代码
支付宝扫码支付后会得到百度网盘链接和提取码。

核心代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宝贝老婆</title>

<style>
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}</style>
</head>
<body>

<canvas id="pinkboard"></canvas>

<script>
/*
 * Settings
 */
</script>
<audio autoplay="autopaly" loop="loop" id="audios" preload="auto">
    <source src="http://music.163.com/song/media/outer/url?id=526464145.mp3" />
</audio>

<style type="text/css">
		*{margin: 0;padding: 0;}

		.wrap{width: 600px;height: 400px;margin: 200px auto;position:absolute;left:30%}
		.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
		.box>div{width: 200px;height: 200px;font-size: 60px;opacity: .9;position: absolute;top: 0;left: 0;transition: all 1s;}

		.box img{width: 200px;height: 200px;}

		.left{transform: rotateY(90deg) translateZ(-100px);}
		.right{transform: rotateY(90deg) translateZ(100px);}
		.top{transform: rotateX(90deg) translateZ(100px);}
		.bottom{transform: rotateX(90deg) translateZ(-100px);}
		.after{transform: translateZ(-100px);}
		.before{transform: translateZ(100px);}

		.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
		.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
		.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
		.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
		.wrap .box:hover .after{transform: translateZ(-160px);}
		.wrap .box:hover .before{transform: translateZ(160px);}

		@keyframes move{
			from{transform: rotateX(20deg) rotateY(0deg);}
			to{transform: rotateX(13deg) rotateY(720deg);}
		}
	</style>
</head>
	<div class="wrap">
		<div class="box">
			<div class="left"><img src="./images/1.jpg" alt=""></div>
			<div class="right"><img src="./images/1.jpg" alt=""></div>
			<div class="top"><img src="./images/1.jpg" alt=""></div>
			<div class="bottom"><img src="./images/1.jpg" alt=""></div>
			<div class="after"><img src="./images/1.jpg" alt=""></div>
			<div class="before"><img src="./images/1.jpg" alt=""></div>
		</div>
	</div>

</body>
</html>

照片最多六张不一样的，最好裁剪成正方形。
电脑端效果：
在这里插入图片描述

手机端效果：
在这里插入图片描述

完整项目：
扫码下载地址—>>>520爱心表白代码
支付宝扫码支付后会得到百度网盘链接和提取码。资源下载解压后里面有详细使用说明。
在这里插入图片描述

皮小孩ls

关注

15
点赞
踩
106

收藏

觉得还不错? 一键收藏
打赏
14
评论
520表白代码

很多朋友想几个代码组合在一起，于是我做了这个效果。中间是爱心包围的照片（照片可以换多张），旁边是文字，另外还有背景音乐。完整项目地址：520爱心表白代码核心代码：<!doctype html><html><head><meta charset="utf-8"><title>宝贝老婆</title><style>html, body { height: 100%; padding: 0; mar
复制链接

扫一扫