首页 > 其他分享 >HTML+CSS实现七夕浪漫情人节表白代码

HTML+CSS实现七夕浪漫情人节表白代码

时间：2023-09-07 17:35:37浏览次数：30  
标签：code together width HTML CSS font margin 情人节 size

在这个数字时代，爱情表白方式也随之改变。在过去，可能会写情书或亲自表达情感，但现在，我们可以利用互联网和编程技术来创造独特而有趣的方式来表达爱意。七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？下面案例是使用HTML、CSS和JavaScript创建一个令人惊喜的爱心表白网页。


HTML+CSS实现七夕浪漫情人节表白代码_javascript


HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML5浪漫爱心表白动画</title>


<style type="text/css">

@font-face {

    font-family: digit;

    src: url('digital-7_mono.ttf') format("truetype");

}

</style>


<link href="css/default.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/garden.js"></script>

<script type="text/javascript" src="js/functions.js"></script>


</head>


<body>

<div style="text-align:center;clear:both;">

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

<script src="/follow.js" type="text/javascript"></script>

</div>

<div id="mainDiv">

    <div id="content">

        <div id="code">

            <span class="comments">/**</span><br />

            <span class="space"/><span class="comments">*2022—02-14,</span><br />

            <span class="space"/><span class="comments">*2023-08-22.</span><br />

            <span class="space"/><span class="comments">*/</span><br />

            Boy name = <span class="keyword">Mr</span> LI<br />

            Girl name = <span class="keyword">Mrs</span> ZHANG<br />

            <span class="comments">// Fall in love river. </span><br />

            The boy love the girl;<br />

            <span class="comments">// They love each other.</span><br />

            The girl loved the boy;<br />

            <span class="comments">// AS time goes on.</span><br />

            The boy can not be separated the girl;<br />

            <span class="comments">// At the same time.</span><br />

            The girl can not be separated the boy;<br />

            <span class="comments">// Both wind and snow all over the sky.</span><br />

            <span class="comments">// Whether on foot or 5 kilometers.</span><br />

            <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />

            <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />

            <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />

            <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />

            <span class="placeholder"/>The boy has but one dream;<br />

            <span class="comments">// The boy wants the girl could well have been happy.</span><br />

            <br>

            <br>

            I want to say:<br />

            Baby, I love you forever;<br />

        </div>

        <div id="loveHeart">

            <canvas id="garden"></canvas>

            <div id="words">

                <div id="messages">

                    亲爱的，这是我们相爱在一起的时光。

                    <div id="elapseClock"></div>

                </div>

                <div id="loveu">

                    爱你直到永永远远。<br/>

                    <div class="signature">- 李先生</div>

                </div>

            </div>

        </div>

    </div>

</div>


<script type="text/javascript">

var offsetX = $("#loveHeart").width() / 2;

var offsetY = $("#loveHeart").height() / 2 - 55;

var together = new Date();

together.setFullYear(2022, 1, 14);

together.setHours(20);

together.setMinutes(0);

together.setSeconds(0);

together.setMilliseconds(0);


if (!document.createElement('canvas').getContext) {

    var msg = document.createElement("div");

    msg.id = "errorMsg";

    msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";

    document.body.appendChild(msg);

    $("#code").css("display", "none")

    $("#copyright").css("position", "absolute");

    $("#copyright").css("bottom", "10px");

    document.execCommand("stop");

} else {

    setTimeout(function () {

        startHeartAnimation();

    }, 5000);


    timeElapse(together);

    setInterval(function () {

        timeElapse(together);

    }, 500);


    adjustCodePosition();

    $("#code").typewriter();

}

</script>


</body>

</html>


CSS代码


body{margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto}

#mainDiv{width:100%;height:100%}

#loveHeart{float:left;width:670px;height:625px}

#garden{width:100%;height:100%}

#elapseClock{text-align:right;font-size:18px;margin-top:10px;margin-bottom:10px}

#words{font-family:"sans-serif";width:500px;font-size:24px;color:#666}

#messages{display:none}

#elapseClock .digit{font-family:"digit";font-size:36px}

#loveu{padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none}

#loveu .signature{margin-top:10px;font-size:20px;font-style:italic}

#clickSound{display:none}

#code{float:left;width:440px;height:400px;color:#333;font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size:12px}

#code .string{color:#2a36ff}

#code .keyword{color:#7f0055;font-weight:bold}

#code .placeholder{margin-left:15px}#code .space{margin-left:7px}

#code .comments{color:#3f7f5f}

#copyright{margin-top:10px;text-align:center;width:100%;color:#666}

#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:0}

#copyright a{color:#666}

标签：code,together,width,HTML,CSS,font,margin,情人节,size
From： https://blog.51cto.com/u_16252215/7398968

相关文章

  • 在Canvas上进行文本输入及其它html元素操作
    问题使用canvas绘制了一个表格，想要在上面进行编辑操作，但canvas并不支持修改操作思路通过给html元素设置绝对定位，遮盖canvas上的指定位置，所有编辑操作都在元素上进行，也可以将元素的值绘制到canvas上，示例demo如下：点击查看代码<!DOCTYPEHTML><html><style></style><bodys......
  • html+css：“圣杯布局”的设计案例
    一、什么是圣杯布局圣杯布局：左右两个盒子固定宽度，中间盒子自适应 二、圣杯布局的设计原则：我们现在来思考自适应这个问题，其本质就是left和right覆盖一整个大的center，然后center使用padding把内容左右留出left和right相应的宽度。可是，现在如何来覆盖呢？这里使用margin......
  • 流程全局引入外部JS、CSS
    全局引入，所有流程   E9如果在代码块里面这样：<script type="text/javascript" src="/js/layui-v2.8.13/layui/layui.js"></script>是引入不了的。  如果想单独在某个流程引入，如下： ......
  • 爬虫系统的核心：如何创建高质量的HTML文件？
    在网页抓取或爬虫系统中，HTML文件的创建是一项重要的任务。HTML文件是网页的基础，包含了网页的所有内容和结构。在爬虫系统中，我们需要生成一个HTML文件，以便于保存和处理网页的内容。在这种情况下，可以使用Java函数来实现将爬取到的网页内容保存为HTML文件的功能。具体来说，当爬虫系统......
  • Ext.form.HtmlEditor获取和清空数据的方法
    下面是从网上拷的一段代码，主要是对其进行注解以便理解Ext.form.HtmlEditor获取和清空数据的方法<script>02.varfaxWin;03.Ext.onReady(function(){04.varform2=newExt.form.FormPanel({05.labelAlign:'top',06.frame:tr......
  • Javascript 中对HTML编码和解码的方法
    String.prototype.HTMLEncode=function(){vartemp=document.createElement("div");(temp.textContent!=null)?(temp.textContent=this):(temp.innerText=this);varoutput=temp.innerHTML;temp=null;returnoutput;}String.prot......
  • html+css：<a>中嵌入<img>，实现图片链接
    这个很好理解，记住<a>中不仅可以写标签，还可以嵌入文字。现在效果如下，在<a>中嵌入了<img>，同时又嵌入了<p>，点击图片和文字段落，其都会直接来进行跳转。这个是非常重要的，一点也不难，耐心做下去。  ......
  • html+css：文章居中，图片居中
    我们平常要涉及很多居中，现在这个要理解一、文字内容居中如下，其宽度居中采用text-align，但其高度居中，则让块高度，和行高度保持一致，此时就可以实现宽度居中 二、图片居中于浏览器，img作为行内块元素是无法实现的！img作为行内块元素，其有行的性质，此时margin是没有效果的，如下图。......
  • 10 个 效果不错的值得收藏的 css 代码片段
    10个css代码片段以下这10个常用的css代码片段值得收藏，都可以用于平常的业务代码当中。1.点点点加载中效果这是一个兼容性不错的用户体验很棒的点点点加载效果，实现思路如下:使用自定义的标签元素dot。将dot元素设置为内联元素(display:inline-block),并设置溢出隐藏(over......
  • 1.HTML开发--个人网页：创建一个个人网页，包括个人简介、联系信息和照片
    创建一个个人网页是一个很好的方式来展示你自己，你可以在上面分享个人信息、联系方式以及你的兴趣爱好。以下是一个简单的HTML模板，你可以基于它创建你自己的个人网页：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99