七夕来袭！是时候展现一下专属于一个程序员的浪漫啦！
先视频展示一下我的小浪漫吧！😘😘
《浪漫节奏 · 心动网页》展示
《 那时的我们》
我们相识于网络，相恋于现实！
在经历了两年的相互暗恋，我们终究走到了一起。伙伴们也都曾感慨我们经历了太多，熬过了太久。而迄今，我都始终不悔于当初的决定：我爱你，傻丫头❤️❤️！！！
初识
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>
项目文件可私信无偿获取哟！！！😘😘
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
