5款网页表白代码3（附带源码）

前言

大部分人都有喜欢的人，学会这些表白代码，下次表白你肯定会成功。希望你有个女朋友😃😃

效果图及部分源码

1.表白书

部分源码

<style>
    * {
      box-sizing: border-box;
    }

    body {
      padding: 0;
      margin: 0;
      background: #e9a0a0;
      overflow: hidden;
    }

    .mosaica {
      position: fixed;
      left: 2px;
      bottom: 2px;
      padding: 4px 6px;
      color: #FFFFFF;
      font-family: "Montserrat";
      font-size: 11px;
      letter-spacing: 0.06em;
    }

    .mosaica a {
      color: #fff;
      font-size: 30px;
      text-decoration: none;
      margin: 0 0 0 30px;
    }

    .mosaica a:hover {
      color: orange;
    }

    .container {
      position: absolute;
      width: 0;
      height: 0;
      left: 43%;
      top: 50%;
      perspective: 1200px;
      transform-origin: center center;
      cursor: move;
    }

    .plane {
      position: absolute;
      display: block;
      width: 900px;
      height: 700px;
      border: 0;
      margin: -350px 0 0 -450px;
      transform-style: preserve-3d;
    }

    .plane:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      background: url('./img/100.jpg') no-repeat;
      background-size: 100% 700px;
      width: 100%;
      height: 100%;
      z-index: -1;
      transform: translateZ(-1px);
    }

    .items {
      position: relative;
      transform-style: preserve-3d;
    }

    .item {
      background-color: pink;
      position: absolute;
      overflow: hidden;
      /*border: 1px solid #2785db;*/
    }

2.六叶花表白

部分源码

<script type="text/javascript">//修改时光沙漏时间
                var offsetX = $("#loveHeart").width() / 2;
                var offsetY = $("#loveHeart").height() / 2 - 55;
                var together = new Date();
                together.setFullYear(2023, 08, 25);
                together.setHours(17);
                together.setMinutes(0);
                together.setSeconds(0);
                together.setMilliseconds(0);

                setTimeout(function () {
                    adjustWordsPosition();
                    startHeartAnimation();
                }, 3000);

                timeElapse(together);
                setInterval(function () {
                    timeElapse(together);
                }, 500);

                adjustCodePosition();
                $("#code").typewriter();
            </script>

3.花瓣爱心表白

部分源码

 <img src="images/xx.png" class="gb" />
    <!--灰色的遮罩层-->
    <!--zboy start-->
    <div id="zboy">
        <!--内容发表区-->
        <div class="Con">
            <span class="col">颜色 <font></font> </span>
            <p class="txt" contenteditable="true"></p>
            <span class="but">清空再写</span>
            <ul>
                <li data-color="#FF8CDE">颜色 <font style="background-color:#ff8cde"></font>
                </li>
                <li data-color="#C59FFF" class="xz">颜色 <font style="background-color:#c59fff"></font>
                </li>
                <li data-color="#89ACFF">颜色 <font style="background-color:#89acff"></font>
                </li>
                <li data-color="#92FFC1">颜色 <font style="background-color:#92ffc1"></font>
                </li>
                <li data-color="#FFCC94">颜色 <font style="background-color:#ffcc94"></font>
                </li>
                <li data-color="#FFFFFF">颜色 <font style="background-color:#ffffff"></font>
                </li>
            </ul>
        </div>

4.炫酷动画文字表白

部分源码

<script>
		function initVars() {

			pi = Math.PI;
			ctx = canvas.getContext("2d");
			canvas.width = canvas.clientWidth;
			canvas.height = canvas.clientHeight;
			cx = canvas.width / 2;
			cy = canvas.height / 2;
			playerZ = -25;
			playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;
			scale = 600;
			seedTimer = 0; seedInterval = 5, seedLife = 100; gravity = .02;
			seeds = new Array();
			sparkPics = new Array();
			s = "https://cantelope.org/NYE/";
			for (i = 1; i <= 10; ++i) {
				sparkPic = new Image();
				sparkPic.src = s + "spark" + i + ".png";
				sparkPics.push(sparkPic);
			}
			sparks = new Array();
			pow1 = new Audio(s + "pow1.ogg");
			pow2 = new Audio(s + "pow2.ogg");
			pow3 = new Audio(s + "pow3.ogg");
			pow4 = new Audio(s + "pow4.ogg");
			frames = 0;
		}

		function rasterizePoint(x, y, z) {

			var p, d;
			x -= playerX;
			y -= playerY;
			z -= playerZ;
			p = Math.atan2(x, z);
			d = Math.sqrt(x * x + z * z);
			x = Math.sin(p - yaw) * d;
			z = Math.cos(p - yaw) * d;
			p = Math.atan2(y, z);
			d = Math.sqrt(y * y + z * z);
			y = Math.sin(p - pitch) * d;
			z = Math.cos(p - pitch) * d;
			var rx1 = -1000, ry1 = 1, rx2 = 1000, ry2 = 1, rx3 = 0, ry3 = 0, rx4 = x, ry4 = z, uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
			if (!uc) return { x: 0, y: 0, d: -1 };
			var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
			var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
			if (!z) z = .000000001;
			if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
				return {
					x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
					y: cy + y / z * scale,
					d: Math.sqrt(x * x + y * y + z * z)
				};
			} else {
				return {
					x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
					y: cy + y / z * scale,
					d: -1
				};
			}
		}

5.PPT式表白

部分源码

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block
}
body {
	line-height:1
}
strong,b {
	font-weight:bold
}
ol,ul {
	list-style:none
}
blockquote,q {
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
html,body {
	width:100%;
	height:100%;
	-webkit-text-size-adjust:none
}
body {
	white-space:nowrap
}

领取源码

5款网页表白代码3源码领取地址：https://www.123pan.com/s/ji8kjv-zOPU3.html提取码:关注微信公众号祖龙科技工作室回复表白代码3即可获取

下期更新预报

5款网页表白代码4（附带源码）

• 📢博客主页：孤客网络科技工作室官方账号
• 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
• 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
• 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻