情人节表白代码（爱心+炫动字体）

做给女朋友的，也分享给大家！！废话不多说直接上代码（也是汲取了大佬的资源，站在巨人的肩膀上）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Thanks</title><style>/*JQuery-Snowfall CSS*/body {overflow: hidden;}.heart-body {width: 500px;margin: 100px auto;position: relative;}.snowfall-flakes:before,.snowfall-flakes:after {content: "ganquanzhong";position: absolute;left: 0px;top: 0px;display: block;width: 20px;height: 38px;background: red;border-radius: 50px 50px 0 0;}.snowfall-flakes:before {-webkit-transform: rotate(-45deg);/* Safari 和 Chrome */-moz-transform: rotate(-45deg);/* Firefox */-ms-transform: rotate(-45deg);/* IE 9 */-o-transform: rotate(-45deg);/* Opera */transform: rotate(-45deg);}.snowfall-flakes:after {left: 13px;-webkit-transform: rotate(45deg);/* Safari 和 Chrome */-moz-transform: rotate(45deg);/* Firefox */-ms-transform: rotate(45deg);/* IE 9 */-o-transform: rotate(45deg);/* Opera */transform: rotate(45deg);}.container{background: rgba(227, 141, 196, 0.56);height: 1000px;}#chakhsu{font-size: 100px;text-align: center;color: whitesmoke;padding-top: 20%;}</style>
</head>
<body><!--使用CDN-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<!--javascript脚本-->
<div class="container"><div id="chakhsu"></div>
<!--<img src="../../assets/爱心.jpg" height="1080" width="1980" />-->
</div>
<script>//调用飘落函数 实现飘落效果$(document).snowfall({flakeCount: 1 ,// 数量round:true, //圆形shadow:true, //阴影minSpeed:1, //最小速度maxSpeed:5 //最大速度});//使用图像作为雪花而不是纯色元素的功能。$(document).snowfall({// image :"images/flake1.jpg",minSize: 8,maxSize:20,minSpeed:1,maxSpeed:3});var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]}function e() {return String.fromCharCode(50 * Math.random() + 33)}function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {var l = document.createElement("span");l.textContent = e(), l.style.color = t(), n.appendChild(l)}return n}function i() {var t = o[c.skillI];c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)}/*内容自定义*/var l = " ",o = ["小姐姐", "情人节快乐", ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75,b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)","rgb(96,84,200)"],c ={text:"", prefixP:-s, skillI:0, skillP:0, direction:"forward", delay: a, step: g};i()};chakhsu(document.getElementById('chakhsu'));
</script>
</body>
</html>

情人节表白代码（爱心+炫动字体）相关推荐

Python实现的无法拒绝的情人节表白代码，python情人节表白代码
Python实现的无法拒绝的情人节表白代码,python情人节表白代码程序运行截图源代码 import sys import cfg import random import pygame fro ...
HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
情人节表白代码（1）
本文整个项目在我的资源里面->>>情人节表白代码(1)里面有详细使用说明. 其他表白代码: html表白代码大全:html表白代码大全情人节表白代码(2):情人节表白代码情人节烟 ...
程序员七夕情人节表白代码
程序员七夕情人节表白代码 MainClass:com.wujinxi.ShowLove package com.wujinxi;import java.awt.*; import java.awt.d ...
Java实现雪花+心型图案+炫动字体
Java实现雪花+心型图案+炫动字体先来动图一张看看效果.(❤ ω ❤)O(∩_∩)O怎么样. 虽然现在不是情人节(+_+)?.没关系,这又有何妨,这依然不妨碍我这颗向往爱情的心(❤ ω ❤). 虽 ...
情人节表白代码（2）
本文整个项目在我的资源里面->>>情人节表白代码(2)里面有详细使用说明. 其他表白代码: html表白代码大全(10个效果):html表白代码大全情人节表白代码(1):情人节表白 ...
HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码
HTML情人节表白代码,给女朋友的电子情书代码,女朋友表白代码,可更换照片及表白内容. 使用方法 1.表白对话在assets/dialog.json 2.女朋友照片放在img中,直接替换即可 3.代码 ...
五行代码实现炫动滑动卡片层叠布局，仿探探、人人影视订阅界面简单优雅
LayoutManagerDemo 项目地址:mcxtzhang/LayoutManagerDemo 简介:五行代码实现炫动滑动卡片层叠布局,仿探探.人人影视订阅界面简单&优雅:Layo ...
利用html5页面表白,利用HTML5实现七夕情人节表白代码
特效描述:利用HTML5实现七夕情人节表白代码.利用HTML5实现七夕情人节表白代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Th an ks for w atch ing! ...
matlab有趣表白程序_matlab情人节表白代码
[实例简介]情人节表白 [实例截图] [核心代码] %构造体积方程和坐标轴,画出图形; [X,Y,Z] = meshgrid(linspace(-3,3,101)); %3D心型图方程如下; F = ...

情人节表白代码（爱心+炫动字体）

情人节表白代码（爱心+炫动字体）相关推荐

最新文章

热门文章