HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript

最新推荐文章于 2024-05-29 17:25:33 发布

@秋天的笔记

最新推荐文章于 2024-05-29 17:25:33 发布

阅读量1.4k

点赞数 2

分类专栏：七夕情人节表白网页源代码 520情人节告白网页制作生日祝福网页html 文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_46166683/article/details/121039554

版权

HTML5七夕情人节表白网页制作 ❤渐变色满天星空3D相册❤ HTML+CSS+JavaScript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡七夕情人节专栏文章

作品介绍

1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。

文章目录

HTML5七夕情人节表白网页制作 ❤渐变色满天星空3D相册❤ HTML+CSS+JavaScript
作品介绍
一、作品展示(已兼容手机端/电脑端)
二、文件目录
三、代码实现
四、学习资料
五、源码下载
六、更多源码

一、作品展示(已兼容手机端/电脑端)

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<html>
  <head>
    <meta charset="utf-8" />
    <script
      id="jqbb"
      src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
    ></script>
    <!-- 播放器css -->
    <link rel="stylesheet" href="css/common.css" />
    <!-- 相册css -->
    <link type="text/css" href="./css/style.css" rel="stylesheet" />
    <style type="text/css">
      html,
      body {
     
        margin: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        cursor: none;
        background: black;
        background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
      }

      .filter {
     
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }

      @keyframes colorChange {
     
        0%,
        100% {
     
          opacity: 0;
        }
        50% {
     
          opacity: 0.9;
        }
      }

      .landscape {
     
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("./xkbg.png");
        background-size: 1000px 250px;
        background-repeat: repeat-x;
        background-position: center bottom;
      }
      /* 雪花颜色 */

      .maple {
     
        position: absolute;
        top: 0;
        color: hsl(350, 100%, 88%);
        /* background: linear-gradient(to bottom, #000000 0%, #5788fe 100%); */
      }
      #music {
     
        position: fixed;
        top: 0;
        left: 0;
      }
    </style>
    <script type="text/javascript" src="js/christmassnow.js"></script>
    <script>
      $(document).ready(function () {
     
        $("body").christmassnow({
     
          snowflaketype: 23, // 1 to 25 types of flakes are available change the number from 1 to 25. each one contain different images.
          snowflakesize: 2, //snowflakesize is 1 then it get the size of the image as random , if the snowflakesize is 2 means size of the image as custom
          snowflakedirection: 1, // 1 means default no wind (top to bottom), 2 means random, 3 means left to right and 4 means  right to left
          snownumberofflakes: 4, // number of flakes is user option
          snowflakespeed: 10, // falling speed of flake 10 sec is default
          flakeheightandwidth: 15, // if you are mention that option flakesize is 2 then this flakeheightandwidth should work values are in pixels 16*16.
        });
      });
    </script>
  </head>

  <body>
    <!-- 红色雪飘落 -->
    <div class="maplebg"></div>

    <script>
      var d = "<div class='maple'>❄<div>";
      setInterval(function () {
     
        var f = $(document).width();
        var e = Math.random() * f - 300; // 雪花的定位left值
        var o = 0.2 + Math.random(); // 雪花的透明度
        var fon = 25 + Math.random() * 10; // 雪花大小
        var l = e - 100 + 200 * Math.random(); // 雪花的横向位移
        var k = 8000 + 5000 * Math.random();
        var deg = Math.random() * 360; // 雪花的方向
        $(d)
          .

最低0.47元/天解锁文章

@秋天的笔记

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript

HTML5七夕情人节表白网页制作 ❤渐变色满天星空3D相册❤ HTML+CSS+JavaScript这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。????文章末尾-已经附上源码下载地址????作者主页-更多源码????七夕情人节专栏文章作品介绍1.网页作品简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚,
复制链接

扫一扫