爱情表白网页动画js特效 JavaScript爱情表白网页动画特效

于 2022-10-02 09:02:30 发布
阅读量128 收藏 1
点赞数
分类专栏： 网页建设 文章标签： 七夕情人节 表白网页制作 程序员表白代码 html生日快乐网站 表白网页模版html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38517811/article/details/127139861
版权

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

61-浪漫告白2

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码



 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Time Together </title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
	 
		  var starttime = new Date("2019/5/9");//这里修改你们在一起的时间
				
				 setInterval(function() {
					 var nowtime = new Date();
					 var time = starttime - nowtime;
					 var day = -parseInt(time / 1000 / 60 / 60 / 24);
					 var hour = parseInt(time / 1000 / 60 / 60 % 24 +22);
					 var minute = parseInt(time / 1000 / 60 % 60);
					 var seconds = parseInt(time / 1000 % 60);
					 $(".time").css({"font-size":"16px"}) 
					 $(".time").css({color:"red"}) 
					 $('.time').html(day + "天" + hour + "时" + minute + "分" + seconds + "秒");
				 }, 20);
					
	 
	</script>
<style type="text/css">
*{margin:0;padding:0;}

.slideshow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
          animation-name: kenburns;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  opacity: 1;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
          animation-name: kenburns-1;
  z-index: 3;
}
.slideshow-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
          animation-name: kenburns-2;
  z-index: 2;
}
.slideshow-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
          animation-name: kenburns-3;
  z-index: 1;
}
.slideshow-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
          animation-name: kenburns-4;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
            transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
            transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@-webkit-keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  z-index: 99;
  text-align: center;
  font-family: Raleway, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5);
  padding: 20px 120px;
  line-height: 1.5;
}
h1 small {
  display: block;
  text-transform: lowercase;
  font-size: .7em;
}
h1 small:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: .5em;
}
h1 small:last-child {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding-top: .5em;
}
	.time{
		margin-top: -40px;
	}
</style>
</head>
<body>

<!-- 
这都被你发现啦，，，爱你❤
 /$$                                     
| $$                                     
| $$        /$$$$$$  /$$    /$$ /$$$$$$  
| $$       /$$__  $$|  $$  /$$//$$__  $$ 
| $$      | $$  \ $$ \  $$/$$/| $$$$$$$$ 
| $$      | $$  | $$  \  $$$/ | $$_____/ 
| $$$$$$$$|  $$$$$$/   \  $/  |  $$$$$$$ 
|________/ \______/     \_/    \_______/ 
                                                                                
                                                                                
                                                                                

-->
<h1>
	<div class="wrap">
	<div class="one" style="font-size: 16px;width: 300px;">亲爱的XXX，我们在一起的时间是：</div><br>
	<div class="time" style="color:white;font-size:12px;"></div>
      <div style="display:none";class="music"><audio controls="controls" autoplay="autoplay" loop=-1><source src="http://music.163.com/song/media/outer/url?id=28481189.mp3" type="audio/mpeg" /></audio></div>
	</div>
	</h1>

<div class="slideshow">
	<div class="slideshow-image" style="background-image: url('img/01.jpg')"></div><!-- 图片路径 -->
	<div class="slideshow-image" style="background-image: url('img/02.jpg')"></div>
	<div class="slideshow-image" style="background-image: url('img/03.jpg')"></div>
	<div class="slideshow-image" style="background-image: url('img/04.jpg')"></div>
</div>

</body>
</html>

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

STU网页设计与制作
关注
专栏目录
表白网页源码
01-23
表白网站页面 个人用的 欢迎大家去下载 本人新手哦 求教
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 7003
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
520爱心背景表白网页动画特效
最新发布
05-20
总的来说，"520爱心背景表白网页动画特效"展示了HTML5、SVG、CSS3和JavaScript在创建互动式、富媒体网页内容方面的强大能力。通过巧妙运用这些技术，开发者能够打造出独特、具有情感共鸣的网络体验，适用于各种节日...
网页爱心特效 HTML5+jQuery制作温馨浪漫爱心表白动画特效.zip
01-30
标题"网页爱心特效 HTML5+jQuery制作温馨浪漫爱心表白动画特效.zip"揭示了这个压缩包的内容，即一个使用HTML5和jQuery技术实现的网页爱心动画特效，目的是为了创建一种温馨浪漫的表白场景。这涉及到前端开发中的动态...
520情人节表白网页动画特效.rar
01-04
本资源"520情人节表白网页动画特效.rar"提供了一组适用于情人节的JS动画特效，旨在帮助开发者学习和借鉴，提升自己的前端技能。 首先，我们要了解HTML（超文本标记语言）是网页的基础结构，CSS（层叠样式表）用于...
JS爱情告白主题特效
07-24
在这个“JS爱情告白主题特效”项目中，开发者利用JS和CSS3（层叠样式表）的技术，创造了一个独特的、充满浪漫气息的互动体验。这个特效集合了100种不同国家的爱情语言，让使用者可以通过代码向心爱的人表达情感，...
程序员网页爱心表白代码特效大全
12-29
总的来说，“程序员网页爱心表白代码特效大全”是一份宝贵的资源，它不仅包含了技术的实用性，还融入了情感的表达。无论是为了学习新的前端技巧，还是为了给特别的人一个惊喜，这份资源都能提供足够的灵感和工具。
html表白网页源码
08-24
表白网页 七夕 情人可以用来表白的源码 纯静态 简单好用
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》
02-02
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》 可以玩的网页 节日送给女朋友 礼物【修正版】 打开网页 会出现心形排列的字母 用鼠标移动字母 从左到右排列成 MerryChristmas 会有奇迹出现 点开试试吧 定会让你的女生感动不已 PS：里面的文字和照片是鄙人和我女友的，亲们记得换成自己想说的话和想要的照片，祝福每对情侣开心幸福！
程序员七夕、情人节表白网页
08-11
基于网上资源开发的html5网页动画，支持更换图片语言等功能，方便程序员二次开发修改等操作。
七夕情人节表白网页 php v1.rar
07-10
七夕情人节表白网页，这个是网页版，手机版的也有。情人节快来了，向它表白吧，只要进行简单的设置即可制作一个精美的情人节表白网站。在火狐下运行效果更好。
html网页表白树源码
04-15
非常绚丽的前端页面表白
撩妹/撩仔代码
Null - 滨
02-14 3418
撩妹/撩仔代码 @Null - 滨 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByA
浪漫的html表白源代码_Love：程序猿的方式【情人节&520—我爱你】动画加音效 → 那些年最浪漫的表白(帮你得到你的她)...
weixin_39702714的博客
12-08 4560
Love：程序猿的方式~【情人节&520—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她)导读 本文章代码的实现，主要参考GitHub(wuxia2001和hackerzhou)，主页代码，博主已进行部分修改。程序猿的方式，将爱进行到底！愿天下有情人，终成眷属！遗憾只属于后悔的人，走过路过，千万不要错过。祝网友们，遇到志同道合的人，就鼓起勇气，勇敢牵手吧！目录爱的...
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript
HTML网页设计
07-24 2703
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

STU网页设计与制作

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值