七夕来袭!是时候展现一下专属于一个程序员的浪漫啦!
先视频展示一下我的小浪漫吧!😘😘
《浪漫节奏 · 心动网页》展示
《 那时的我们》
我们相识于网络,相恋于现实!
在经历了两年的相互暗恋,我们终究走到了一起。伙伴们也都曾感慨我们经历了太多,熬过了太久。而迄今,我都始终不悔于当初的决定:我爱你,傻丫头❤️❤️!!!
初识
2019年5月中旬,那时的我们,日夜相伴,简简单单的问候,让我们逐渐熟悉,当时的我,曾一度因为你而感到生活充满色彩,因此写下了内心的悸动:
最初的相遇
简单到一个问候
最终的相知
波折到彼此理解
在这个陌生的世界里
我们
从陌路走向同路
从相异渐化相似
这一切在旁观者看似平淡的感情之下
有着当局者无法掩饰的内心沉浮
是啊
这就是我们
简单而又复杂的我们
相知
2019年后半年,专属的电台与书信在你我之间传动,那时的你曾告诉我:
“我大概是上辈子听惯了夜晚的曲子,才有了今生的每晚夜色温柔”
你生在南方,南方多雨,却有着专属于南方的温婉美丽,我居于北,望雨时便会想起南方的你:
朦胧烟雨水泛青,长街十里人慢行
于尔城南伴无声,于我城北伴无形
暗生情愫
那时的你,总会对我说:每晚的晚安
我也曾无数次幻想,那是否是你在悄悄告诉我:w(我) a(爱) n(你)
因为终究只是猜测,所以我只能对你说:
我习惯了你在我身边的存在
就像你每晚对我说的晚安
晚安!致远方的你
和
星空之下,我幻想着我与星辰的距离
也幻想着那些地方存在有我的梦
你知道的
我喜欢在星空下奔跑
因为那样我总会感觉我能离它近一些
可我也知道的
这每一步都会与你变远的时间里
你会一直都在
倘若你想到我了
一定要记得告诉星空
我想它们会告诉我的
表白
这一刻,是我最纠结的,但同时也使我做的最正确的决定,两年的暗恋长跑终于 抱得美人归 了。
在那731天的时间里
默默乔装在你身边那个我
就像一个嗜睡症患者
沉睡在有你的世界里不愿醒来
而那时常的梦境也让我憧憬着
我们牵手相拥
我们谈笑风生
然而这一次,待我睁开眼睛的时候
你的脸庞在我枕边是那样的清晰可见
我相信这一次的梦是真的
如今
我只想说:
佳脯,肴羹,糖水与甜糕;
这一朝一夕,尽食世间百味
夜雨,空巷,只伞与二人;
这一日一生,感今时二十余夕
创意完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浪漫节奏 · 心动网页</title>
<style>
/* 背景模块制作 */
body {
position: relative;
width: 100%;
height: 100%;
background-image: url(over\ love.webp);
background-repeat: no-repeat;
overflow: hidden;
}
/* 心模块制作 */
.div1 {
position: absolute;
top: 675px;
right: 284px;
width: 40px;
height: 40px;
background-color: rgb(189 2 33);
transform: rotate(45deg) scale(1);
animation: change1 2s infinite;
}
.div1::before,
.div1::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
background-color: rgb(189 2 33);
border-radius: 50% 50% 0 50%;
}
.div1::before {
left: -20px;
}
.div1::after {
top: -20px;
}
/* 文本栏模块*/
h1 {
position: absolute;
top: 650px;
right: 50px;
}
/* 视频盒子 */
.div2 {
position: absolute;
top: 360px;
left: 50%;
width: 886px;
height: 500px;
transform: translate(-50%, -50%);
border-radius: 30px;
box-shadow: 0px 0px 5px 5px rgb(111, 111, 111);
overflow: hidden;
transition: all 2s;
/* visibility: hidden; */
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
/* 盒子模型 */
.box {
position: relative;
top: 365px;
bottom: 30px;
background-color: #fff;
}
/* 播放器转盘模块 */
.music {
position: absolute;
right: 50px;
bottom: -100px;
width: 123px;
height: 123px;
border-radius: 50%;
background-image: url(./music.png);
background-repeat: no-repeat;
background-size: cover;
background-position: -37px 0px;
transform: rotate(0deg);
z-index: 98;
animation: change2 5s linear infinite;
}
.open {
position: absolute;
right: 25px;
bottom: -105px;
width: 50px;
height: 50px;
}
/* 播放器摇杆控制器模块 */
a {
position: absolute;
display: block;
right: 0;
bottom: -110px;
width: 50px;
height: 50px;
background-image: url(open.png);
background-position: center;
background-size: 120% 120%;
z-index: 99;
}
.span {
position: absolute;
display: block;
right: 9px;
bottom: 9px;
width: 25px;
height: 25px;
border-radius: 50%;
transform: scale(1);
}
a span:first-child {
border: 3px solid rgb(189 2 33);
z-index: 99;
}
a span:nth-child(2) {
z-index: 98;
border: 3px solid rgb(255, 255, 255);
}
/* 播放器摇杆模块制作 */
.open_music {
position: absolute;
right: -85px;
bottom: 14px;
width: 82px;
height: 99px;
background-image: url(open_music.png);
background-position: left;
background-size: contain;
background-repeat: no-repeat;
transform-origin: 0 100%;
transform: rotate(300deg);
z-index: 98;
transition: all 1.5s;
}
/* 播放器波纹模块 */
.bg_music1,
.bg_music2,
.bg_music3 {
position: absolute;
border-radius: 50%;
transform: scale(1);
opacity: .6;
overflow: hidden;
}
.bg_music1 {
right: 47px;
bottom: -103px;
width: 123px;
height: 122px;
border: 3px solid rgb(108, 145, 219);
}
.bg_music2 {
right: 66px;
bottom: -83px;
width: 83px;
height: 82px;
border: 3px solid rgb(230, 86, 86);
}
.bg_music3 {
right: 81px;
bottom: -68px;
width: 53px;
height: 52px;
border: 3px solid rgb(233, 174, 131);
}
@keyframes change1 {
0% {
transform: rotate(45deg) scale(1);
}
50% {
transform: rotate(45deg) scale(0.4);
}
100% {
transform: rotate(45deg) scale(0.8);
}
}
@keyframes change2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes change3 {
0% {
transform: scale(1);
}
100% {
transform: scale(3);
border: 5px solid rgba(167, 175, 247, 0);
}
}
@keyframes change4 {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
border: 3px solid rgba(167, 175, 247, 0);
}
}
@keyframes change5 {
0% {
transform: scale(2);
}
100% {
transform: scale(1);
border: 5px solid rgba(167, 175, 247, 0);
}
}
@keyframes change6 {
0% {
transform: scale(3);
}
100% {
transform: scale(1);
border: 5px solid rgba(167, 175, 247, 0);
}
}
@keyframes change7 {
0% {
transform: scale(5);
}
100% {
transform: scale(1);
border: 5px solid rgba(167, 175, 247, 0);
}
}
</style>
</head>
<body class="clearfix">
<!-- 爱心模块 -->
<div class="div1 clearfix"></div>
<!-- 标题模块 -->
<h1 id="h">《七夕节 致我们的故事》</h1>
<!-- 视频模块 -->
<div class="div2">
<video id="video1" src="love.mp4" poster="face.png"></video>
</div>
<!-- 盒子模型 -->
<div class="box">
<!-- 播放器转盘模型 -->
<div class="music"></div>
<!-- 摇杆控制器 -->
<a id="audio1" onclick="playPause()" href="#">
<!-- 外红圈样式 -->
<span class="span"></span>
<!-- 内波纹样式 -->
<span class="span" id="span"></span>
</a>
<!-- 三道波纹样式 -->
<div class="bg_music1" id="bgmusic1"></div>
<div class="bg_music2" id="bgmusic2"></div>
<div class="bg_music3" id="bgmusic3"></div>
<!-- 摇杆控制器 -->
<div class="open">
<div class="open_music" id="openmusic"></div>
</div>
</div>
<script type="text/javascript">
// 控制视频播放
var myVideo = document.getElementById("video1");
// 控制摇杆
var myopenmusic = document.getElementById("openmusic");
// 播放器控制器波纹
var span1 = document.getElementById("span");
// 播放器波纹
var bgmusic1 = document.getElementById("bgmusic1");
var bgmusic2 = document.getElementById("bgmusic2")
var bgmusic3 = document.getElementById("bgmusic3")
var sp = 1;
function playPause() {
// 播放器控制器波纹
// 播放器波纹
if (sp == 1) {
span1.style.animation = "change4 0.6s linear";
bgmusic1.style.animation = "change3 1s linear infinite";
bgmusic2.style.animation = "change3 2s linear infinite";
bgmusic3.style.animation = "change3 1s linear infinite";
sp = 2;
} else {
span1.style.animation = "none";
bgmusic1.style.animation = "change5 0.5s linear ";
bgmusic2.style.animation = "change6 1s linear ";
bgmusic3.style.animation = "change7 2s linear ";
sp = 1;
}
// 摇杆控制
if (myopenmusic.style.transform == "rotate(280deg)") {
myopenmusic.style.transform = "rotate(300deg)";
}
else {
myopenmusic.style.transform = "rotate(280deg)";
}
// 视频播放控制
if (myVideo.paused) {
myVideo.play();
}
else {
myVideo.pause();
}
}
</script>
</body>
</html>
项目文件可私信无偿获取哟!!!😘😘