• 2022七夕程序员必备的表白黑科技（七夕限定款）

     大家好，我是博主月夜枫，我又来了，最近有点忙，就抽时间凑下热闹吧！！！

    月遇从云，花遇和风，今晚上的夜空很美。👇

    原句：“月遇从云，花遇和风，今晚上的夜空很美，我又想你。”——太宰治

    亚当表白夏娃，打开了上帝都不知道的魅力后花园。罗密欧表白朱丽叶，懂得了爱情比任何事情都值得。你曾经表白过吗？

    课桌间，将萌动的心跳化作一张表白小纸条，大学时，不经意间牵起的双手就是美好的承诺，工作后，陪屏幕那一面的 TA 深夜加班......

    表白的话有千万种，我们却不懂得像作家那样开口表达，村上春树的表达是，希望你下辈子不要改名，这样我会好找你一点。

    2022这个七夕情人节，当爱已经无法放进礼物盒的时候，我们为你准备了唯美表白代码，把说不出口的话，从这里寄出一封情“抒”！

    自古七夕多惆怅。

    小编：距离七夕没剩下一个月了。你准备怎么过？

    你说：嗯，什么？七夕到了？七夕是什么，能吃吗？你问我怎么过？？？

     

    目录

    1.2022七夕情人节表白页面，祝你表白成功！！

     2.JS爱心表白神器，助你表白成功！！

    3.放大放大都是我喜欢你♥

    4.Bui Bui Bui 爱你

    5.网页爱心树表白

    6.浪漫爱心

    7.情人节表白放烟花动画特效​编辑

    8.love场景式表白​编辑

     

    1.2022七夕情人节表白页面，祝你表白成功！！

     2195e5a57bf723b270c9dd117321643e.gif

    功能

    一个网页输入名称，生成带参数的网址。

    浏览器输入该网址，即可打开带有该名字的网页，图片轮播，还带有音乐哟

    （简单实现，本文不是技术软文，而是小工具推荐啊啊哈哈）

    (ps: 已经做了移动端适配，手机打开效果更加哦)

    代码

    1. // name.html
    2. html>
    3. <html>
    4.   <head>
    5.     <meta charset="UTF-8" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    8.     <title>输入名字title>
    9.     <style>
    10.       body {
    11.         min-height: 100vh;
    12.         background: linear-gradient(#1d2b64, #f8cdda);
    13.         color: #fff;
    14.         font-family: PingFangSC-Regular;
    15.         padding: 0;
    16.         margin: 0;
    17.       }
    18.       input {
    19.         display: inline-block;
    20.         width: 80%;
    21.         height: 32px;
    22.         line-height: 1.5;
    23.         padding: 4px 7px;
    24.         margin: 20px auto 0 auto;
    25.         font-size: 16px;
    26.         border: 1px solid #dcdee2;
    27.         border-radius: 4px;
    28.         color: #515a6e;
    29.         background-color: #fff;
    30.         background-image: none;
    31.         position: relative;
    32.         cursor: text;
    33.         -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    34.           -webkit-box-shadow 0.2s ease-in-out;
    35.         transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    36.           -webkit-box-shadow 0.2s ease-in-out;
    37.         transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    38.           box-shadow 0.2s ease-in-out;
    39.         transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    40.           box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    41.       }
    42.       .button {
    43.         display: flex;
    44.         align-items: center;
    45.         justify-content: center;
    46.         position: relative;
    47.         z-index: 10;
    48.         width: 80%;
    49.         height: 40px;
    50.         background: rgba(89, 126, 247, 1);
    51.         border-radius: 44px;
    52.         font-size: 14px;
    53.         font-weight: 500;
    54.         color: rgba(255, 255, 255, 1);
    55.         line-height: 20px;
    56.         cursor: pointer;
    57.       }
    58.       .button-shadow {
    59.         width: 80%;
    60.         height: 40px;
    61.         background: rgba(106, 140, 253, 1);
    62.         border-radius: 44px;
    63.         opacity: 0.3081;
    64.         -webkit-filter: blur(4px);
    65.         filter: blur(4px);
    66.         margin-top: -36px;
    67.       }
    68.       #card {
    69.         width: 80%;
    70.         box-sizing: border-box;
    71.         padding: 20px 12px;
    72.         word-wrap: break-word;
    73.       }
    74.       @media screen and (min-width: 800px) {
    75.         .container {
    76.           width: 350px;
    77.           margin: 0 auto;
    78.         }
    79.       }
    80.     style>
    81.   head>
    82.   <body>
    83.     <div>
    84.       <div style="text-align: center; margin-top: 40px">
    85.         <h2>Happy Valentine's Dayh2>
    86.         <input type="text" id="name" />
    87.       div>
    88.       <script>
    89.         window.onload = function() {
    90.           document.getElementById("btn").addEventListener("click", function() {
    91.             let name = document.getElementById("name").value;
    92.             if (name === "") {
    93.               alert("请输入姓名");
    94.               return;
    95.             }
    96.             let url =
    97.               "https://zxpsuper.github.io/Demo/valentine_day/index.html?name=" +
    98.               encodeURIComponent(encodeURIComponent(name));
    99.             document.getElementById("card").innerHTML = url;
    100.           });
    101.         };
    102.       script>
    103.       <div
    104.         style="display: flex;margin-top: 40px;  flex-direction:column;align-items: center "
    105.       >
    106.         <div id="btn">确定div>
    107.         <div>div>
    108.         <div id="card">div>
    109.         <p id="copy-btn">复制以上网址发给他人吧p>
    110.       div>
    111.     div>
    112.   body>
    113. html>
    114. ------------
    115. //index.html
    116. html>
    117. <html>
    118.   <head>
    119.     <meta charset="UTF-8" />
    120.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    121.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    122.     <title>情人节快乐title>
    123.     <style>
    124.       img {
    125.         width: 100%;
    126.       }
    127.       body {
    128.         min-height: 100vh;
    129.         background: linear-gradient(#1d2b64, #f8cdda);
    130.         color: #fff;
    131.         font-family: PingFangSC-Regular;
    132.         padding: 0;
    133.         margin: 0;
    134.       }
    135.       .avatar {
    136.         width: 44px;
    137.         height: 44px;
    138.         border-radius: 50%;
    139.         border: 2px solid #fff;
    140.       }
    141.       .shadow {
    142.         position: absolute;
    143.         left: 0;
    144.         z-index: -1;
    145.         filter: blur(50px);
    146.       }
    147.       .btn-group {
    148.         display: flex;
    149.         margin-top: 40px;
    150.         justify-content: space-between;
    151.         align-items: center;
    152.       }
    153.       .btn-group div {
    154.         flex: 1;
    155.         text-align: center;
    156.       }
    157.       .sure {
    158.         padding: 14px 0;
    159.         background: linear-gradient(
    160.           180deg,
    161.           rgba(255, 127, 87, 1) 0%,
    162.           rgba(221, 40, 39, 1) 100%
    163.         );
    164.         border-top-left-radius: 20px;
    165.         border-bottom-left-radius: 20px;
    166.       }
    167.       .cancel {
    168.         padding: 14px 0;
    169.         background: #eee;
    170.         color: #333;
    171.         border-top-right-radius: 20px;
    172.         border-bottom-right-radius: 20px;
    173.       }
    174.       marquee {
    175.         background: none;
    176.       }
    177.       @media screen and (min-width: 800px) {
    178.         .container {
    179.           width: 350px;
    180.           margin: 0 auto;
    181.         }
    182.       }
    183.     style>
    184.   head>
    185.   <body>
    186.     <div>
    187.       <div style="padding: 12px">
    188.         <div
    189.           style="position: relative; display: flex; align-items: center; margin-bottom: 10px"
    190.         >
    191.           <img src="avatar.jpg-600" alt="" />
    192.           <img src="avatar.jpg-600" alt="" class="avatar shadow" />
    193.           <span style="margin-left: 10px" id="name">小皮咖span>
    194.         div>
    195.         <marquee scrolldelay="0" scrollamount="20">
    196.           <img src="1.png-600" />
    197.           <img src="2.png-600" />
    198.           <img src="3.png-600" />
    199.           <img src="4.png-600" />
    200.           <img src="5.png-600" />
    201.           <img src="6.png-600" />
    202.           <img src="7.png-600" />
    203.         marquee>
    204.         <audio
    205.           src="http://att.chinauui.com/day_181211/20181211_8480d0323003455bd6de8CcQ3Eq28Mm9.mp3"
    206.           autoplay
    207.           loop
    208.         >
    209.           您的浏览器不支持 audio 标签。
    210.         audio>
    211.         <div>
    212.           <div onclick="alert('情人节快乐\\(^o^)/~')">
    213.             确定
    214.           div>
    215.           <div onclick="alert('取消无效，请重新选择')">取消div>
    216.         div>
    217.       div>
    218.     div>
    219.     <script>
    220.       function getQueryString(name) {
    221.         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    222.         var r = window.location.search.substr(1).match(reg);
    223.         if (r != null) {
    224.           return r[2];
    225.         }
    226.         return null;
    227.       }
    228.       window.onload = function() {
    229.         let name = getQueryString("name");
    230.         document.getElementById("name").innerHTML = decodeURIComponent(
    231.           decodeURIComponent(name)
    232.         );
    233.       };
    234.     script>
    235.   body>
    236. html>

     2.JS爱心表白神器，助你表白成功！！

    七夕程序员表白代码
    rar 0星 超过10%的资源 4.59MB
    下载

     代码

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>lovetitle>
    6. <link href="favicon.ico" rel="shortcut icon" />
    7. <style>
    8. body{
    9.   overflow: hidden;
    10.   margin: 0;
    11. }
    12. h1{
    13.   position: fixed;
    14.   top: 50%;
    15.   left: 0;
    16.   width: 100%;
    17.   text-align: center;
    18.   transform:translateY(-50%);
    19.   font-family: 'Love Ya Like A Sister', cursive;
    20.   font-size: 40px;
    21.   color: #c70012;
    22.   padding: 0 20px;
    23. }
    24. h1 span{
    25.     font-size:20px;
    26. }
    27. style>
    28. head>
    29. <body>
    30. <h1 id="h1">h1>
    31. <canvas>canvas> 
    32. <script>
    33. var canvas = document.querySelector("canvas"),
    34.   ctx = canvas.getContext("2d");
    35. var ww,wh;
    36. function onResize(){
    37.   ww = canvas.width = window.innerWidth;
    38.   wh = canvas.height = window.innerHeight;
    39. }
    40. ctx.strokeStyle = "red";
    41. ctx.shadowBlur = 25;
    42. ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
    43. var precision = 100;
    44. var hearts = [];
    45. var mouseMoved = false;
    46. function onMove(e){
    47.   mouseMoved = true;
    48.   if(e.type === "touchmove"){
    49.     hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    50.     hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    51.   }
    52.   else{
    53.     hearts.push(new Heart(e.clientX, e.clientY));
    54.     hearts.push(new Heart(e.clientX, e.clientY));
    55.   }
    56. }
    57. var Heart = function(x,y){
    58.   this.x = x || Math.random()*ww;
    59.   this.y = y || Math.random()*wh;
    60.   this.size = Math.random()*2 + 1;
    61.   this.shadowBlur = Math.random() * 10;
    62.   this.speedX = (Math.random()+0.2-0.6) * 8;
    63.   this.speedY = (Math.random()+0.2-0.6) * 8;
    64.   this.speedSize = Math.random()*0.05 + 0.01;
    65.   this.opacity = 1;
    66.   this.vertices = [];
    67.   for (var i = 0; i < precision; i++) {
    68.     var step = (i / precision - 0.5) * (Math.PI * 2);
    69.     var vector = {
    70.       x : (15 * Math.pow(Math.sin(step), 3)),
    71.       y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
    72.     }
    73.     this.vertices.push(vector);
    74.   }
    75. }
    76. Heart.prototype.draw = function(){
    77.   this.size -= this.speedSize;
    78.   this.x += this.speedX;
    79.   this.y += this.speedY;
    80.   ctx.save();
    81.   ctx.translate(-1000,this.y);
    82.   ctx.scale(this.size, this.size);
    83.   ctx.beginPath();
    84.   for (var i = 0; i < precision; i++) {
    85.     var vector = this.vertices[i];
    86.     ctx.lineTo(vector.x, vector.y);
    87.   }
    88.   ctx.globalAlpha = this.size;
    89.   ctx.shadowBlur = Math.round((3 - this.size) * 10);
    90.   ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
    91.   ctx.shadowOffsetX = this.x + 1000;
    92.   ctx.globalCompositeOperation = "screen"
    93.   ctx.closePath();
    94.   ctx.fill()
    95.   ctx.restore();
    96. };
    97. function render(a){
    98.   requestAnimationFrame(render);
    99.   hearts.push(new Heart())
    100.   ctx.clearRect(0,0,ww,wh);
    101.   for (var i = 0; i < hearts.length; i++) {
    102.     hearts[i].draw();
    103.     if(hearts[i].size <= 0){
    104.       hearts.splice(i,1);
    105.       i--;
    106.     }
    107.   }
    108. }
    109. onResize();
    110. window.addEventListener("mousemove", onMove);
    111. window.addEventListener("touchmove", onMove);
    112. window.addEventListener("resize", onResize);
    113. requestAnimationFrame(render);
    114. window.onload=function starttime(){
    115.         time(h1,'2017,7,4');     // 在一起的时间
    116.         ptimer = setTimeout(starttime,1000); // 添加计时器
    117. }
    118.     function time(obj,futimg){
    119.         var nowtime = new Date().getTime(); // 现在时间转换为时间戳
    120.         var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
    121.         var msec = nowtime-futruetime; // 毫秒 未来时间-现在时间
    122.         var time = (msec/1000);  // 毫秒/1000
    123.         var day = parseInt(time/86400); // 天  24*60*60*1000 
    124.         var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
    125.         var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
    126.         var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
    127. //              console.log(hour+":"+minute+":"+second)
    128. //              alert(hour)
    129.         obj.innerHTML="大懒猪
      咱俩在一起的时间已经：
      "      +day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了
      一时间不知道从哪说起,真爱来了，我们要好好把握。
      不管面临多大的压力,不管前面的路如何崎岖.
      不管经历过什么,我仍坚信最浪漫的事就是和你一起慢慢变老.
      相信中间的计时器,将永远继续下去,直至数据溢出.      "
    130.         return true;
    131.     }
    132. script>
    133. body>
    134. html>?

    3.放大放大都是我喜欢你♥

    代码 

    1. from PIL import Image, ImageDraw, ImageFont
    2.  
    3. font_size = 7
    4. text = "我喜欢你！"
    5. img_path = "66.jpg"
    6.  
    7. img_raw = Image.open(img_path)
    8. img_array = img_ra.load()
    9.  
    10. img_new = Image.new("RGB", img_raw.size, (0, 0, 0))
    11. draw = ImageDraw.Draw(img_new)
    12. font = ImageFont.truetype('Calibri.ttf', font_size)
    13.  
    14. def character_generator(text):
    15.     while True:
    16.         for i in range(len(text)):
    17.             yield text[i]
    18.  
    19. ch_gen = character_generator(text)
    20.  
    21. for y in range(0, img_raw.size[1], font_size):
    22.     for x in range(0, img_raw.size[0], font_size):
    23.         draw.text((x, y), next(ch_gen), font=font, fill=img_array[x, y], direction=None)
    24.  
    25. img_new.convert('RGB').save("save_06.jpeg")

    4.Bui Bui Bui 爱你

     

     代码

    1. from turtle import *
    2.  
    3. forward(200) # 从当前画笔方向移动200
    4. left(90) # 逆时针移动90°
    5. backward(200) # 在当前画笔方向的反方向移动200
    6. right(90) # 顺时针移动90°
    7. circle(200) # 画一个半径为200的圆，圆心在画笔左边
    8. def heart(x, y, size):
    9.     go_to(x, y)
    10.     left(150)
    11.     begin_fill()
    12.     forward(51*size)
    13.     ring(150,size,0.3,'right')
    14.     ring(210,size,0.786,'right')
    15.     left(120)
    16.     ring(210,size,0.786,'right')
    17.     ring(150,size,0.3,'right')
    18.     forward(51*size)
    19.     end_fill()
    20. #头部
    21. color('black')
    22. go_to(-228, 72)
    23. pensize(3)
    24. left(150)
    25. ring(350,1,0.8,'right')
    26.  
    27. #手臂
    28. left(150)
    29. forward(70)
    30. left(90)
    31. forward(10)
    32. ring(200,0.1,0.9,'right')
    33. forward(10)
    34. left(90)
    35. forward(20)
    36. ring(200,0.1,0.9,'right')
    37. forward(10)
    38. left(90)
    39. ring(200,0.2,0.9,'right')
    40. left(100)
    41. left
    42. forward(80)
    43. # 添加文字
    44. go_to(-39, 69)
    45. write("520", align="left", font=("黑体", 30, "normal"))

    5.网页爱心树表白

     

     代码

    七夕网页表白神器
    zip 0星 超过10%的资源 6.47MB
    下载
    1. <body>
    2.  
    3. <audio autoplay="autopaly">
    4.  
    5.   <source src="renxi.mp3" type="audio/mp3" />
    6.  
    7. audio>
    8.  
    9. <div id="main">
    10.  
    11.   <div id="wrap">
    12.  
    13.     <div id="text">
    14.  
    15.       <div id="code"> <font color="#FF0000"> <span class="say">浮世三千 吾爱有三 日月与卿span><br>
    16.  
    17.         <span class="say"> span><br>
    18.  
    19.         <span class="say">日为朝  月为暮  卿为朝朝暮暮span><br>
    20.  
    21.         <span class="say"> span><br>
    22.  
    23.         <span class="say">在这浮浮沉沉的大千世界里 我爱的只有三样span><br>
    24.  
    25.         <span class="say">span><br>
    26.  
    27.         <span class="say">太阳  月亮和我爱的你span><br>
    28.  
    29.                 <span class="say"> span><br>
    30.  
    31.         <span class="say">太阳带给我们白昼和希望 月亮带给我们夜幕和宁静  span><br>
    32.  
    33.                         <span class="say"> span><br>
    34.  
    35.         <span class="say"> 你与我的朝夕相伴 于我而言即是永恒 你是我一生挚爱span><br>
    36.  
    37.         <span class="say">span><br>
    38.  
    39.         <span class="say">一生爱一人很难，也不丢人span><br>
    40.  
    41.              <span class="say"> span><br>
    42.  
    43.                  <span class="say"> 最美的爱情愿景不就是"愿得一心人 白首不相离"嘛span><br>
    44.  
    45.                          <span class="say"> span><br>
    46.  
    47.                                  <span class="say"> 如果可以请牢记当初的爱情承诺 记住最初的美好span><br>
    48.  
    49.                         <span class="say"> span><br>
    50.  
    51.         <span class="say">愿岁月静好 浅笑安然 一切美好如约而至span><br>
    52.  
    53.         <span class="say"> span><br>
    54.  
    55.      font>
    56.  
    57.  
    58.  
    59.       div>
    60.  
    61.     div>
    62.  
    63.     <div id="clock-box"> <span class="STYLE1">span><font color="#33CC00">愿得一心人，白首不相离font> <span class="STYLE1">这简单的话语……span>
    64.  
    65.       <div id="clock">div>
    66.  
    67.     div>
    68.  
    69.     <canvas id="canvas" width="1100" height="680">canvas>
    70.  
    71.   div>
    72.  
    73. div>

    6.浪漫爱心

     代码

    1. html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Our Love Storytitle>
    6.  
    7. <style type="text/css">
    8. @font-face {
    9. 	font-family: digit;
    10. 	src: url('digital-7_mono.ttf') format("truetype");
    11. }
    12. style>
    13.  
    14. <link href="css/default.css" type="text/css" rel="stylesheet">
    15. <script type="text/javascript" src="js/jquery.js">script>
    16. <script type="text/javascript" src="js/garden.js">script>
    17. <script type="text/javascript" src="js/functions.js">script>
    18.  
    19. head>
    20.  
    21. <body>
    22.  
    23. <div id="mainDiv">
    24. 	<div id="content">
    25. 		<div id="code">
    26. 			<span class="comments">/**span><br />
    27. 			<span class="space"/><span class="comments">*2013—02-14,span><br />
    28. 			<span class="space"/><span class="comments">*2013-02-28.span><br />
    29. 			<span class="space"/><span class="comments">*/span><br />
    30. 			Boy name = <span class="keyword">Mrspan> LI<br />
    31. 			Girl name = <span class="keyword">Mrsspan> ZHANG<br />
    32. 			<span class="comments">// Fall in love river. span><br />
    33. 			The boy love the girl;<br />
    34. 			<span class="comments">// They love each other.span><br />
    35. 			The girl loved the boy;<br />
    36. 			<span class="comments">// AS time goes on.span><br />
    37. 			The boy can not be separated the girl;<br />
    38. 			<span class="comments">// At the same time.span><br />
    39. 			The girl can not be separated the boy;<br />
    40. 			<span class="comments">// Both wind and snow all over the sky.span><br />
    41. 			<span class="comments">// Whether on foot or 5 kilometers.span><br />
    42. 			<span class="keyword">The boyspan> very <span class="keyword">happyspan>;<br />
    43. 			<span class="keyword">The girlspan> is also very <span class="keyword">happyspan>;<br />
    44. 			<span class="placeholder"/><span class="comments">// Whether it is right nowspan><br />
    45. 			<span class="placeholder"/><span class="comments">// Still in the distant future.span><br />
    46. 			<span class="placeholder"/>The boy has but one dream;<br />
    47. 			<span class="comments">// The boy wants the girl could well have been happy.span><br />
    48. 			<br>
    49. 			<br>
    50. 			I want to say:<br />
    51. 			Baby, I love you forever;<br />
    52. 		div>
    53. 		<div id="loveHeart">
    54. 			<canvas id="garden">canvas>
    55. 			<div id="words">
    56. 				<div id="messages">
    57. 					亲爱的，这是我们相爱在一起的时光。
    58. 					<div id="elapseClock">div>
    59. 				div>
    60. 				<div id="loveu">
    61. 					爱你直到永永远远。<br/>
    62. 					<div class="signature">- 李先生div>
    63. 				div>
    64. 			div>
    65. 		div>
    66. 	div>
    67. 	<div id="copyright">
    68. 		<a href="#">....a><br />
    69. 		<a href="#">....a><br />
    70. 		
    71. 	div>
    72. div>
    73.  
    74. <script type="text/javascript">
    75. var offsetX = $("#loveHeart").width() / 2;
    76. var offsetY = $("#loveHeart").height() / 2 - 55;
    77. var together = new Date();
    78. together.setFullYear(2013, 2, 28);
    79. together.setHours(20);
    80. together.setMinutes(0);
    81. together.setSeconds(0);
    82. together.setMilliseconds(0);
    83.  
    84. if (!document.createElement('canvas').getContext) {
    85. 	var msg = document.createElement("div");
    86. 	msg.id = "errorMsg";
    87. 	msg.innerHTML = "Your browser doesn't support HTML5!
      Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"      ; 
    88. 	document.body.appendChild(msg);
    89. 	$("#code").css("display", "none")
    90. 	$("#copyright").css("position", "absolute");
    91. 	$("#copyright").css("bottom", "10px");
    92. 	document.execCommand("stop");
    93. } else {
    94. 	setTimeout(function () {
    95. 		startHeartAnimation();
    96. 	}, 5000);
    97.  
    98. 	timeElapse(together);
    99. 	setInterval(function () {
    100. 		timeElapse(together);
    101. 	}, 500);
    102.  
    103. 	adjustCodePosition();
    104. 	$("#code").typewriter();
    105. }
    106. script>
    107.  
    108. body>
    109. html>

    7.情人节表白放烟花动画特效

     

    代码 

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    6. <title>jQuery情人节表白放烟花动画特效title>
    7. head>
    8.  
    9. <script src="js/lib/jquery.min.js" type="text/javascript">script>
    10. <script src="js/lib/jquery.fireworks.js" type="text/javascript">script>
    11.  
    12. <style type="text/css">
    13. *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
    14. html{ width: 100%; height: 100%; }
    15. body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;}
    16. .share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
    17. .content{ padding: 80px 20px;}
    18. .text_wrapper{ display: -webkit-box; display: flex; }
    19. .text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
    20. .hide{ display: none !important; }
    21. p{ margin: 0; }
    22. .btn-groups{ padding-right: 20px; text-align: center; }
    23. .heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
    24. .btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
    25. .btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
    26. .btn-a{ background: #d26ae5; }
    27. .btn-b{ background: #c9c9c9; }
    28. .btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
    29. .btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
    30. .btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
    31. .btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
    32. .container{  }
    33. .container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
    34. .container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
    35. .container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
    36. .confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
    37. .type_words{ padding: 12px 20px; }
    38. @keyframes breath {
    39. 	0% {
    40. 		transform: scale3d(1,1,1);
    41. 		-webkit-transform: scale3d(1,1,1);
    42. 		transform-origin: 50% 50%;
    43. 	}
    44. 	50%{
    45. 		transform: scale3d(1.02,1.02,1.02);
    46. 		-webkit-transform: scale3d(1.02,1.02,1.02);
    47. 		transform-origin: 50% 50%;
    48. 	}
    49. 	100%{
    50. 		transform: scale3d(1,1,1);
    51. 		-webkit-transform: scale3d(1,1,1);
    52. 		transform-origin: 50% 50%;
    53. 	}
    54. }
    55. style>
    56.  
    57. <script type="text/javascript">
    58. $(function() {
    59. 	$('#yes').click(function(event) {
    60. 		modal('我就知道小姐姐您一定会愿意的。(^_^)', function() {
    61. 			$('.page_one').addClass('hide');
    62. 			$('.page_two').removeClass('hide');
    63. 			// typeWrite();
    64. 			fireworks();
    65. 			
    66. 		});
    67. 	});
    68. 	$('#no').click(function(event) {
    69. 		modal('明人不说暗话！', A);
    70. 	});
    71. });
    72.  
    73. function A() {
    74. 	modal('我喜欢你！', B);
    75. }
    76.  
    77. function B() {
    78. 	modal('我知道你在等我这一句话', C);
    79. }
    80.  
    81. function C() {
    82. 	modal('请您不要拒绝我', D);
    83. }
    84.  
    85. function D() {
    86. 	modal('拒绝我，不存在的', E);
    87. }
    88.  
    89. function E() {
    90. 	modal('这辈子都不可能让你离开我', F);
    91. }
    92.  
    93. function F() {
    94. 	modal('跟我走吧', G);
    95. }
    96.  
    97. function G() {
    98. 	modal('房产证上写你名', H);
    99. }
    100.  
    101. function H() {
    102. 	modal('我会做饭', I);
    103. }
    104.  
    105. function I() {
    106. 	modal('爱你。么么哒！', J)
    107. }
    108.  
    109. function J() {
    110. 	modal('行，我们去民政局登记吧', function() {
    111. 		fireworks();
    112. 	});
    113. }
    114.  
    115. function fireworks() {
    116. 	$('.page_one').addClass('hide');
    117. 	$('.page_two').removeClass('hide');
    118. 	$('.page_two').fireworks({ 
    119. 	  sound: false, 
    120. 	  opacity: 0.9, 
    121. 	  width: '100%', 
    122. 	  height: '100%' 
    123. 	});	
    124. }
    125.  
    126. function modal(content, callback) {
    127. 	var tpl = '
      '+
    128. 							'
      '      +
    129. 							'
      '+
    130. 								'
      '+ content +'
      '      +
    131. 								''+
    132. 							'
      '+
  • '
    ';
  • $('body').append(tpl);
  • $(document).on('click', '.confirm', function() {
  • $('.container').remove();
  • callback();
  • });
  • }
  • var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
  • var x = 0;
  • var speed = 150;
  • var current = 0;
  • function typeWrite(){
  • $('.type_words').html(myWords.substring(0, x++)+'_');
  • var timer = setTimeout("typeWrite()", speed);
  • if (x == myWords.length) {
  • x = myWords.length;
  • clearTimeout(timer)
  • }
  • }
  • script>
  • <body>
  • <div class="share_img"><img src="images/a8b.png" alt="">div>
  • <div class="page_one">
  • <div class="content">
  • <div class="text_wrapper">
  • <img src="images/a8.png" alt="">
  • <div class="text">
  • 小姐姐，我好喜欢你，你愿意做我女朋友吗？
  • div>
  • div>
  • div>
  • <div class="btn-groups">
  • <div class="heart-btn">
  • <div id="yes" class="btn btn-a"><span>愿意span>div>
  • div>
  • <div id="no" class="btn btn-b"><span>不愿意span>div>
  • div>
  • div>
  • <div class="page_two hide">
  • <div class="type_words">div>
  • div>
  • <div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  • div>
  • body>
  • html>

    • 8.love场景式表白

     

    代码 

    1. <html>HTML>
    7. <html>
    9. <head>
    10. 	<meta http-equiv='Pragma' content='no-cache' />
    11. 	<meta charset="UTF-8">
    12. 	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    13. 	<meta name="author" content="DSX,工科男表白,浪漫表白,表白网站">
    14. 	<meta name="description" content="这是XXX为XXX表白制作的表白网站">
    15. 	<title>XXX LOVE XXXtitle>
    16. 	<link rel="stylesheet" href="all.min.css" >
    17. head>
    18. <body>
    19. 	<div class="flowtime">
    20. 		<div class="ft-section section-1" data-id="section-1">
    21. 			<div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
    22. 				<p class="text1"><span id="text-75" contenteditable="true">XXspan> ❤ <span id="text-76" contenteditable="true">XXspan> <span id="text-77" contenteditable="true">一生一世span>p>
    23. 				<p class="text2">按键盘 "↓" <span id="text-78" contenteditable="true">开始倾听工科男的浪漫表白span>p>
    24. 			div>
    25. 			<div id="/section-1/page-2" class="ft-page page-2" data-id="page-2">
    26. 				<p class="top-text" id="text-1" contenteditable="true">过去的XX一直是一个人生活，享受着孤独，也憧憬着爱情。p>
    27. 				<img src="img/iali63.jpg" tppabs="img/iali63.jpg"  alt="过去的XX一直是一个人生活，享受着孤独，也憧憬着爱情。" />
    28. 			div>
    29. 			<div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3">
    30. 				<h2 class="text" id="text-2" contenteditable="true">一个人的长廊h2>
    31. 				<img src="img/iali35.jpg" tppabs="img/iali35.jpg"  alt="一个人的长廊"/>
    32. 			div>
    33. 			<div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4">
    34. 				<h2 class="center-text" id="text-3" contenteditable="true">一个人的山岗h2>
    35. 				<img src="img/iali6.jpg" tppabs="img/iali6.jpg"  alt="一个人的山岗" />
    36. 			div>
    37. 		div>
    38. 		<div class="ft-section section-2" data-id="section-2">
    39. 			<div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1">
    40. 				<h2 class="center-text" id="text-4" contenteditable="true">一个人的地铁h2>
    41. 				<img src="img/iali19.jpg" tppabs="img/iali19.jpg"  alt="一个人的地铁" />
    42. 			div>
    43. 			<div id="/section-2/page-2" class="ft-page page-6" data-id="page-2">
    44. 				<h2 class="center-text" id="text-5" contenteditable="true">一个人的游乐场h2>
    45. 				<img src="img/iali29.jpg" tppabs="img/iali29.jpg" alt="一个人的游乐场"/>
    46. 			div>
    47. 			<div id="/section-2/page-3" class="ft-page page-7" data-id="page-3">
    48. 				<h3 id="text-6" contenteditable="true">但他依然乐观，微笑着，等待着h3>
    49. 				<img src="img/iali60.jpg" tppabs="img/iali60.jpg"  alt="但他依然乐观，微笑着，等待着"/>
    50. 			div>
    51. 			<div id="/section-2/page-4" class="ft-page page-8 full-img" data-id="page-4">
    52. 				<h3 id="text-7" contenteditable="true">生活难免有风风雨雨h3>
    53. 				<img src="img/iali51.jpg" tppabs="img/iali51.jpg" alt="生活难免有风风雨雨" />
    54. 			div>
    55. 			<div id="/section-2/page-5" class="ft-page page-9" data-id="page-5">
    56. 				<h3 id="text-8" contenteditable="true">他总是能够轻松的应对h3>
    57. 				<img src="img/iali5.jpg" tppabs="img/iali5.jpg" />
    58. 			div>
    59. 			<div id="/section-2/page-6" class="ft-page page-10" data-id="page-6">
    60. 				<h3 id="text-9" contenteditable="true">并且面带阳光、自信的笑容h3>
    61. 				<img src="img/iali22.jpg" tppabs="img/iali22.jpg" />
    62. 			div>
    63. 		div>
    64. 		<div class="ft-section section-3" data-id="section-3">
    65. 			<div id="/section-3/page-1" class="ft-page page-11 full-img" data-id="page-1">
    66. 				<h3 id="text-10" contenteditable="true">生活也不会总是一帆风顺h3>
    67. 				<img src="img/iali24.jpg" tppabs="img/iali24.jpg"  />
    68. 			div>
    69. 			<div id="/section-3/page-2" class="ft-page page-12" data-id="page-2">
    70. 				<h3><span id="text-11" contenteditable="true">但他每次都能勇敢的面对span><br /><span id="text-12" contenteditable="true">随时准备接受生活的挑战span>h3>
    71. 				<img src="img/iali25.jpg" tppabs="img/iali25.jpg" />
    72. 			div>
    73. 			<div id="/section-3/page-3" class="ft-page page-13" data-id="page-3">
    74. 				<img src="img/iali64.jpg" tppabs="img/iali64.jpg" alt='可是小明的爱情又在哪里呢？' />
    75. 				<h3 id="text-13" contenteditable="true">可是XX的爱情又在哪里呢？h3>
    76. 			div>
    77. 			<div id="/section-3/page-4" class="ft-page page-14 left-img" data-id="page-4">
    78. 				<h3 id="text-14" contenteditable="true">在镜子里面吗？他不敢相信h3>
    79. 				<img src="img/iali46.jpg" tppabs="img/iali46.jpg" />
    80. 			div>
    81. 			<div id="/section-3/page-5" class="ft-page page-15 left-img" data-id="page-5">
    82. 				<h3><span id="text-15" contenteditable="true">他去问大树，我的爱情在哪里？span><br /><span id="text-16" contenteditable="true">大树告诉他，也许就在不远的地方span>h3>
    83. 				<img src="img/iali45.jpg" tppabs="img/iali45.jpg" />
    84. 			div>
    85. 			<div id="/section-3/page-6" class="ft-page page-16 left-img" data-id="page-6">
    86. 				<h3><span id="text-17" contenteditable="true">于是，XX一个人继续向前走span><br /><span id="text-18" contenteditable="true">走在茫茫的雪地上span>h3>
    87. 				<img src="img/iali66.jpg" tppabs="img/iali66.jpg" />
    88. 			div>
    89. 			<div id="/section-3/page-7" class="ft-page page-17 top-text" data-id="page-7">
    90. 				<h3 id="text-19" contenteditable="true">直到有一天XX与XX相遇了h3>
    91. 				<img src="img/iali16.jpg" tppabs="img/iali16.jpg" />
    92. 			div>
    93. 		div>
    94. 		<div class="ft-section section-4" data-id="section-4">
    95. 			<div id="/section-4/page-1" class="ft-page page-18 full-img" data-id="page-1">
    96. 				<p class="text" id="text-20" contenteditable="true">XX喜欢XX，非常非常的喜欢，因为XX的出现，XX脸上有了更加灿烂的笑容p>
    97. 				<img src="img/iali11.jpg" tppabs="img/iali11.jpg"  />
    98. 			div>
    99. 			<div id="/section-4/page-2" class="ft-page page-19" data-id="page-2">
    100. 				<h3 id="text-21" contenteditable="true">可是XX会喜欢XX吗？h3>
    101. 				<img src="img/iali75.jpg" tppabs="img/iali75.jpg" />
    102. 			div>
    103. 			<div id="/section-4/page-3" class="ft-page page-20" data-id="page-3">
    104. 				<img src="img/iali59.png" tppabs="img/iali59.png" />
    105. 				<h3 id="text-22" contenteditable="true">XX想。。。h3>
    106. 				<img src="img/iali9.jpg" tppabs="img/iali9.jpg" />
    107. 			div>
    108. 			<div id="/section-4/page-4" class="ft-page page-21" data-id="page-4">
    109. 				<h3 id="text-23" contenteditable="true">XX想和XX在一起h3>
    110. 				<img src="img/iali59.png" tppabs="img/iali59.png" />
    111. 			div>
    112. 			<div id="/section-4/page-5" class="ft-page page-22 left-img" data-id="page-5">
    113. 				<h3 id="text-24" contenteditable="true">然后XX会经常去找XXh3>
    114. 				<img src="img/iali4.jpg" tppabs="img/iali4.jpg" />
    115. 			div>
    116. 			<div id="/section-4/page-6" class="ft-page page-23 left-img" data-id="page-6">
    117. 				<h3 id="text-25" contenteditable="true">然后两个人一起出去玩h3>
    118. 				<img src="img/iali44.jpg" tppabs="img/iali44.jpg" />
    119. 			div>
    120. 			<div id="/section-4/page-7" class="ft-page page-24 full-img" data-id="page-7">	
    121. 				<h3 id="text-26" contenteditable="true">晚上XX会把XX送回家h3>
    122. 				<img src="img/iali32.jpg" tppabs="img/iali32.jpg" />
    123. 			div>
    124. 		div>
    125. 		<div class="ft-section section-5" data-id="section-5">
    126. 			<div id="/section-5/page-1" class="ft-page page-25 left-img" data-id="page-1">
    127. 				<h3><span id="text-27" contenteditable="true">直到很晚span><br /><span id="text-28" contenteditable="true">XX再一个人回家span>h3>
    128. 				<img src="img/iali37.jpg" tppabs="img/iali37.jpg" />
    129. 			div>
    130. 			<div id="/section-5/page-2" class="ft-page page-26 top-text" data-id="page-2">
    131. 				<h3 id="text-29" contenteditable="true">然后高兴地进入梦乡，在梦中还会和XX在一起h3>
    132. 				<img src="img/iali10.gif" tppabs="img/iali10.gif" />
    133. 			div>
    134. 			<div id="/section-5/page-3" class="ft-page page-27" data-id="page-3">
    135. 				<h3 id="text-30" contenteditable="true">XX想成为了XX的逛街助手h3>
    136. 				<img src="img/iali67.jpg" tppabs="img/iali67.jpg"  />
    137. 			div>
    138. 			<div id="/section-5/page-4" class="ft-page page-28" data-id="page-4">
    139. 				<h3 id="text-31" contenteditable="true">然后，XX和XX一起去很多地方玩h3>
    140. 				<img src="img/iali40.jpg" tppabs="img/iali40.jpg" />
    141. 			div>
    142. 			<div id="/section-5/page-5" class="ft-page page-29" data-id="page-5">
    143. 				<h3 id="text-32" contenteditable="true">XX也想和XX一块成为一对吃货h3>
    144. 				<img src="img/iali12.jpg" tppabs="img/iali12.jpg" />
    145. 			div>
    146. 			<div id="/section-5/page-6" class="ft-page page-30" data-id="page-6">
    147. 				<h3 id="text-33" contenteditable="true">再然后，他们会搬到了一起h3>
    148. 				<img src="img/iali76.gif" tppabs="img/iali76.gif" />
    149. 			div>
    150. 			<div id="/section-5/page-7" class="ft-page page-31" data-id="page-7">
    151. 				<h3 id="text-34" contenteditable="true">再然后，XX会开始学习她的技能h3>
    152. 				<img src="img/iali77.jpg" tppabs="img/iali77.jpg" />
    153. 			div>
    154. 		div>
    155. 		<div class="ft-section section-6" data-id="section-6">
    156. 			<div id="/section-6/page-1" class="ft-page page-32" data-id="page-1">
    157. 				<h3 id="text-35" contenteditable="true">煮饭h3>
    158. 				<img src="img/iali62.jpg" tppabs="img/iali62.jpg"  />
    159. 			div>
    160. 			<div id="/section-6/page-2" class="ft-page page-33 top-text" data-id="page-2">
    161. 				<h3 id="text-36" contenteditable="true">那时候，每天早上，他们吃着自己做的美食h3>
    162. 				<img src="img/iali3.jpg" tppabs="img/iali3.jpg" />
    163. 			div>
    164. 			<div id="/section-6/page-3" class="ft-page page-34 left-img" data-id="page-3">
    165. 				<h3 id="text-37" contenteditable="true">然后在同一个站台，高高兴兴的一起上班h3>
    166. 			div>
    167. 			<div id="/section-6/page-4" class="ft-page page-35" data-id="page-4">
    168. 				<h3><span id="text-38" contenteditable="true">XX会感觉自己好幸福。span><br /><span id="text-39" contenteditable="true">因为自己有了家span><br /><span id="text-40" contenteditable="true">那个有XX在的地方span>h3>
    169. 				<img src="img/iali8.gif" tppabs="img/iali8.gif" />
    170. 			div>
    171. 			<div id="/section-6/page-5" class="ft-page page-36 full-img" data-id="page-5">
    172. 				<h3 id="text-41" contenteditable="true">他们可能偶尔也会吵架h3>
    173. 				<img src="img/iali31.jpg" tppabs="img/iali31.jpg" />
    174. 			div>
    175. 			<div id="/section-6/page-6" class="ft-page page-37 left-img" data-id="page-6">
    176. 				<h3 id="text-42" contenteditable="true">XX不想这样h3>
    177. 				<img src="img/iali49.jpg" tppabs="img/iali49.jpg" />
    178. 			div>
    179. 			<div id="/section-6/page-7" class="ft-page page-38 bottom-text" data-id="page-7">
    180. 				<img src="img/iali21.jpg" tppabs="img/iali21.jpg" />
    181. 				<h3 id="text-43" contenteditable="true">一定是我有什么做的不对，XX会这么想h3>
    182. 			div>
    183. 		div>
    184. 		<div class="ft-section section-7" data-id="section-7">
    185. 			<div id="/section-7/page-1" class="ft-page page-39 left-img" data-id="page-1">
    186. 				<h3 id="text-44" contenteditable="true">如果没有XX在身边，窗外就没有风景h3>
    187. 				<img src="img/iali2.jpg" tppabs="img/iali2.jpg" />
    188. 			div>
    189. 			<div id="/section-7/page-2" class="ft-page page-40" data-id="page-2">
    190. 				<h3 id="text-45" contenteditable="true">如果没有XX在身后h3>
    191. 				<img src="img/iali14.jpg" tppabs="img/iali14.jpg"  />
    192. 			div>
    193. 			<div id="/section-7/page-3" class="ft-page page-41" data-id="page-3">
    194. 				<img src="img/iali30_1.jpg" tppabs="img/iali30_1.jpg" class='img1'/>
    195. 				<img src="img/iali30_2.jpg" tppabs="img/iali30_2.jpg" class='img2'/>
    196. 				<h3 id="text-46" contenteditable="true"> XX又怎会飞的更高更远h3>
    197. 			div>
    198. 			<div id="/section-7/page-4" class="ft-page page-42" data-id="page-4">
    199. 				<h3><span id="text-47" contenteditable="true">XX不想这样。他要为XX改变自己span><br /><span id="text-48" contenteditable="true">XX不知道XX喜欢什么，但他一定会满足她的一切。span>h3>
    200. 				<img src="img/iali69.jpg" tppabs="img/iali69.jpg"  />
    201. 			div>
    202. 			<div id="/section-7/page-5" class="ft-page page-43" data-id="page-5">
    203. 				<img src="img/iali42.jpg" tppabs="img/iali42.jpg" />
    204. 				<h3 id="text-49" contenteditable="true">我愿意一直陪伴着你h3>
    205. 			div>
    206. 			<div id="/section-7/page-6" class="ft-page page-44 left-img" data-id="page-6">
    207. 				<h3><span id="text-50" contenteditable="true">爱情就像花草一样span><br /><span id="text-51" contenteditable="true">需要用包容来浇灌span>h3>
    208. 				<img src="img/iali0.jpg" tppabs="img/iali0.jpg" />
    209. 			div>
    210. 			<div id="/section-7/page-7" class="ft-page page-45 left-img" data-id="page-7">
    211. 				<h3><span id="text-52" contenteditable="true">直到一天，XX不想让自己后悔span><br /><span id="text-53" contenteditable="true">XX开始准备一份惊喜span>h3>
    212. 				<img src="img/iali18.jpg" tppabs="img/iali18.jpg" />
    213. 			div>
    214. 		div>
    215. 		<div class="ft-section section-8" data-id="section-8">
    216. 			<div id="/section-8/page-1" class="ft-page page-46" data-id="page-1">
    217. 				<img src="img/iali57.gif" tppabs="img/iali57.gif" />
    218. 				<h3>
    219. 					<span id="text-54" contenteditable="true">看着惊喜一点点准备好了span>
    220. 					<span id="text-55" contenteditable="true">XX好开心span>
    221. 					<span id="text-56" contenteditable="true">因为他想象着XX看到时span>
    222. 					<span id="text-57" contenteditable="true">开心的样子span>
    223. 				h3>
    224. 			div>
    225. 			<div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2">
    226. 				<img src="img/iali58.jpg" tppabs="img/iali58.jpg" />
    227. 				<h3>
    228. 					<span id="text-58" contenteditable="true">想想未来他们或许span>
    229.                     <span id="text-59" contenteditable="true">会有一辈子span>
    230. 					<span id="text-59" contenteditable="true">XX好开心span>
    231. 					<span id="text-60" contenteditable="true">或许他可以和XX一起span>
    232. 					<span id="text-61" contenteditable="true">去全世界好多地方玩span>h3>
    233. 				
    234. 			div>
    235. 			<div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3">
    236. 				<p><span id="text-62" contenteditable="true">XX也会继续努力span><br /><span id="text-63" contenteditable="true">为了他和XX的梦之城堡span>p>
    237. 				<img src="img/iali65.jpg" tppabs="img/iali65.jpg"  />
    238. 			div>
    239. 			<div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4">
    240. 			<img src="img/iali71.jpg" tppabs="img/iali71.jpg" />
    241. 				<p class="text">
    242. 					<span class='text' id="text-64" contenteditable="true">XX很幸福，因为他遇到了XX。他相信后面的每天都会是快乐的span><br />
    243. 					<span class='text' id="text-65" contenteditable="true">简简单单，体会与XX在一起的每一个刻span>
    244. 				p>
    245. 			div>
    246. 			<div id="/section-8/page-5" class="ft-page page-50" data-id="page-5">
    247. 				<p class='text' id="text-66" contenteditable="true">XX想和XX一起过幸福的生活p>
    248. 				<img src="img/iali50_1.jpg" tppabs="img/iali50_1.jpg" class='img1' />
    249. 				<img src="img/iali50_2.jpg" tppabs="img/iali50_2.jpg" class='img2' />
    250. 			div>
    251. 			<div id="/section-8/page-6" class="ft-page page-51" data-id="page-6">
    252. 				<p>
    253. 					<span id="text-67" contenteditable="true">永远有多远？span><br />
    254. 					<span id="text-68" contenteditable="true">比时间多一秒就是永远，我会永远爱你span><br />
    255. 					<span id="text-69" contenteditable="true">世界有多大？span><br />
    256. 					<span id="text-70" contenteditable="true">你走到哪里，世界就有多大span>
    257. 					p>
    258. 			div>
    259. 		div>
    260. 		<div class="ft-section section-9" data-id="section-9">
    261. 			<div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1">
    262. 				<h3 id="text-71" contenteditable="true">如果三年后你注定是我女朋友，你何不提早行使你的权利h3>
    263. 				<img src="img/iali20.jpg" tppabs="img/iali20.jpg"  />
    264. 			div>
    265. 			<div id="/section-9/page-2" class="ft-page page-53" data-id="page-2">
    266. 				<img src="img/iali68.jpg" tppabs="img/iali68.jpg" alt='happy birthday' />
    267. 				<h3 id="text-72" contenteditable="true">我爱你h3>
    268. 			div>
    269. 			<div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3" >
    270. 				<div class="center-img">I love youdiv>
    271. 			div>
    272. 			<div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4">
    273. 				<img src="img/14915.jpg" tppabs="img/14915.jpg" />
    274. 				<p class="text">
    275. 					<span id="text-73" contenteditable="true">我相信，XX和XX的故事会一直继续下去。span><br />
    276. 					<span id="text-74" contenteditable="true">无论精彩、平淡都会是他们喜欢的。span><br />
    277.                     <span id="text-74" contenteditable="true">XXX，我爱你span><br />
    278. 					<br />
    279. 					<br />
    280. 					<span> -- 按“Esc"键有惊喜span>
    281. 				p>				
    282. 			div>
    283. 		div>
    284. 	div>
    285. 	<div class="nojavascript">您的浏览器禁用了javascript，无法正常浏览本页面div>
    286. 	
    287.  
    288. 	<audio id="bgmMusic" src="lovebgm.mp3" autoplay="autoplay" loop preload="auto" type="audio/mp3">audio>
    289.  
    290. 	
    291. 	<script src="jquery.min.js" tppabs="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">script>
    292. 	<script src="all.min.js" >script>
    293. 	<script src="love.min.js" >script>
    294. 	<div class="mPower"><span id="on" title="点击暂停" style="">span><span id="off" title="点击播放"  style="">span>div>
    295.  
    296. 	
    297. body>
    298. html>

    9.卡通短片七夕情人节送花动画场景

    代码 

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    6.     <title>七夕节快乐title>
    7.     <link rel='stylesheet' href='css/55c16d94000109f300000000.css' />
    8.     <link rel='stylesheet' href='css/55c16dab0001286100000000.css' />
    9.     <link rel='stylesheet' href='css/55c16dc00001fa1a00000000.css' />
    10.     <link rel='stylesheet' href='css/55c16dda0001113100000000.css' />
    11.     <script type="text/javascript" src="js/55ac9a860001a6c500000000.js">script>
    12.     <script type="text/javascript" src="js/55ac9ea30001ace700000000.js">script>
    13.     <script type="text/javascript" src="js/55c16c910001e21b00000000.js">script>
    14.  
    15.  
    16. head>
    17.  
    18. <body>
    19. <div id='content'>
    20.     <ul class='content-wrap'>
    21.         
    22.         <li>
    23.             
    24.             <div class="a_background">
    25.                 <div class="a_background_top">div>
    26.                 <div class="a_background_middle">div>
    27.                 <div class="a_background_botton">div>
    28.             div>
    29.             
    30.             <div class="cloudArea">
    31.                 <div class="cloud cloud1">div>
    32.                 <div class="cloud cloud2">div>
    33.             div>
    34.             
    35.             <div id="sun">div>
    36.         li>
    37.         
    38.         <li>
    39.             
    40.             <div class="b_background">div>
    41.             <div class="b_background_preload">div>
    42.             
    43.             <div class="shop">
    44.                 <div class="door">
    45.                     <div class="door-left">div>
    46.                     <div class="door-right">div>
    47.                 div>
    48.                 
    49.                 <div class="lamp">div>
    50.             div>
    51.             
    52.             <div class="bird">div>
    53.         li>
    54.         
    55.         <li>
    56.             
    57.             <div class="c_background">
    58.                 <div class="c_background_top">div>
    59.                 <div class="c_background_middle">div>
    60.                 <div class="c_background_botton">div>
    61.             div>
    62.             
    63.             <div class="girl">div>
    64.             <div class="bridge-bottom">
    65.                 <div class="water">
    66.                     <div id="water1" class="water_1">div>
    67.                     <div id="water2" class="water_2">div>
    68.                     <div id="water3" class="water_3">div>
    69.                     <div id="water4" class="water_4">div>
    70.                 div>
    71.             div>
    72.             
    73.             <ul class="stars">
    74.                 <li class="stars1">li>
    75.                 <li class="stars2">li>
    76.                 <li class="stars3">li>
    77.                 <li class="stars4">li>
    78.                 <li class="stars5">li>
    79.                 <li class="stars6">li>
    80.             ul>
    81.             
    82.             <div class="logo">祝天下有情人终成眷属div>
    83.         li>
    84.     ul>
    85.     
    86.     <div id="snowflake">div>
    87.     
    88.     <div id="boy" class="charector">div>
    89. div>
    90. body>
    91.  
    92. html>

  • 相关阅读:
    解决Tomcat启动后的控制台乱码问题
    docker run -v 用户目录的权限配置
    【Raspberry Pi】搭建NAS流媒体播放器 + ARIA2 + YAAW + 迅雷下载系统
    网络编程_fd_set结构
    MySQL空间函数知识点总结
    PAT 1025 PAT Ranking
    C++程序员入门需要怎么学？（InsCode AI 创作助手）
    Vue中如何实现动态改变字体大小
    设计模式——组合模式、享元模式（Integer缓存）（结构型模式）
    Linux ARM平台开发系列讲解（PCIE） 2.13.3 PCI设备的访问方法（桥设备）
  • 原文地址：https://blog.csdn.net/weixin_48321993/article/details/126157191