前言
2月14日，是西方的传统节日之一。男女在这一天互送巧克力、贺卡和花，用以表达爱意或友好，现已成为欧美各国青年人喜爱的节日。大概这世上有多少情人就有多少关于情人节来历的诠释吧。和中国人现在用近乎狂热的热情过起了圣诞节一样，情人节也已经悄悄渗透到了无数年轻人的心目当中，成为中国传统节日之外的又一个重要节日。
一年一度的情人节又到了。今年的情人节很特别，不在外面吃饭，不在外面看电影，不在外面逛街，一切都在家里，在微信，在视频，或者可以用自己独特的方式表达自己的情感。作为一名程序猿，也可以很浪漫的表达自己的感情。。。。
2021情人节到了,赶紧给心爱的女朋友表达自己的爱吧
演示
烟花,树叶飘落特效
引入JS文件
<!--树叶飘落特效-->
<script src="js/lib/su.js"></script>
<script src="js/lib/snowfall.js"></script>
<!--烟花特效-->
<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>
记得以前情人节都是送花，送口红或者其他礼物的，搞点特殊的不好吗（狗头保命）
现学现卖，即用心还特别的礼物。。。还可以用来表白，其他节日也可以用。。。
首页代码片段
以情人节为主题的简单单页网站：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"/>
<title>宝贝，情人节快乐！</title>
</head>
<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>
<!--树叶飘落特效-->
<script src="js/lib/su.js"></script>
<script src="js/lib/snowfall.js"></script>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
max-width: 600px;
margin: 0 auto;
background: url(images/like.jpg) no-repeat center 0
color: #f0f0f0;
}
.share_img {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}
.content {
padding: 120px 50px;
}
.hide {
display: none !important;
}
p {
margin: 0;
}
.btn-groups {
padding-right: 20px;
text-align: center;
}
.heart-btn {
display: inline-block;
animation: breath 0.8s linear 0s infinite both;
-webkit-animation: breath 0.8s linear 0s infinite both;
}
.btn {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
margin: 0 30px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.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);
}
.btn-a {
background: #d26ae5;
}
.btn-a:before {
content: "";
position: absolute;
display: block;
width: 30px;
height: 60px;
background: #d2fd;
left: -29px;
top: 0;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
}
.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;
}
.container {
}
.container .mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.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;
}
.container .modal p {
margin-top: 20px;
margin-bottom: 20px;
font-size: 16px;
color: #353535;
text-align: center;
}
.confirm {
display: block;
width: 120px;
height: 40px;
margin: 0 auto;
border: none;
font-size: 16px;
border-radius: 5px;
color: #ffffff;
background: #f45cae;
}
.type_words {
padding: 12px 20px;
}
@keyframes breath {
0% {
transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transform-origin: 50% 50%;
}
50% {
transform: scale3d(1.02, 1.02, 1.02);
-webkit-transform: scale3d(1.02, 1.02, 1.02);
transform-origin: 50% 50%;
}
100% {
transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transform-origin: 50% 50%;
}
}
</style>
<script type="text/javascript">
$(function () {
$("#yes").click(function (event) {
modal("准备好了吗(^_^)", function () {
$(".page_one").addClass("hide");
$(".page_two").removeClass("hide");
typeWrite();
fireworks();
});
});
$("#no").click(function (event) {
modal("明人不说暗话！", A);
});
});
function A() {
modal("我喜欢你啊！", B);
}
function B() {
modal("我知道你在等我这一句话", C);
}
function C() {
modal("我们已经在一起321天了！", D);
}
function D() {
modal("尽管经常打打闹闹", E);
}
function E() {
modal("这辈子都不可能让你离开我的", F);
}
function F() {
modal("跟我走吧！", G);
}
function G() {
modal("房产证上写你名 ", H);
}
function H() {
modal("我做饭，家务活我干！ ", I);
}
function I() {
modal("爱你。么么哒！", function () {
fireworks();
});
}
function fireworks() {
$(".page_one").addClass("hide");
$(".page_two").removeClass("hide");
$(".page_two").fireworks({
sound: false,
opacity: 0.9,
width: "100%",
height: "100%",
});
}
function modal(content, callback) {
var tpl =
'<div class="container">' +
'<div class="mask"></div>' +
'<div class="modal">' +
"<p>" +
content +
"</p>" +
'<button type="button" id="confirm" class="confirm">确定</button>' +
"</div>" +
"</div>";
$("body").append(tpl);
$(document).on("click", ".confirm", function () {
$(".container").remove();
callback();
});
}
var myWords =
"你知道我不爱说情话，因为我的情话只给你说，虽然我的脾气不好，但是你一直在宠着我，也有你一直在惯着我，我只想你做我一个人的小公主，没有什么甜言蜜语，只有一颗真心和你在一起，我什么都不会做，但是我就可以做到的就是能够陪你在最后。";
var x = 0;
var speed = 100;//速度调节
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>
<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-a"><span>爱你</span></div>
</div>
</div>
<div class="page_two hide">
<div class="type_words"></div>
</div>
</body>
</html>
特点介绍
- css样式可以根据自己喜欢修改，背景颜色，动画过渡等
- 弹窗文字可以修改
function A() {
modal("我喜欢你啊！", B);
}
function B() {
modal("我知道你在等我这一句话", C);
}
function C() {
modal("我们已经在一起321天了！", D);
}
- 模拟打字：
function typeWrite() {
$(".type_words").html(myWords.substring(0, x++) + "_");
var timer = setTimeout("typeWrite()", speed);
if (x == myWords.length) {
x = myWords.length;
clearTimeout(timer);
}
- 烟花特效
sound 控制烟花声音
opactiy 控制透明度
function fireworks() {
$(".page_one").addClass("hide");
$(".page_two").removeClass("hide");
$(".page_two").fireworks({
sound: true,
opacity: 0.8,
width: "100%",
height: "100%",
});
}
源码地址
有条件的可以放到自己的服务器上
关注博主,可以在博主资源栏下载