七夕特别篇
七夕到了,虽然自己没有对象,但是也要好好向往生活,献上自己收藏的的两个网页代码,附源码和源码网址
1.萌翻少女的发光果冻泡泡
<!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>
* {
margin: 0;
padding: 0;
}
body {
/* 100% 窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(150deg, #d299c2, #fef9d7);
/* 溢出隐藏 */
overflow: hidden;
}
.container {
width: 200px;
height: 200px;
/* 相对定位 */
position: relative;
}
/* 泡泡 */
.bubble {
width: 100%;
height: 100%;
/* 径向渐变 */
background: radial-gradient(circle at 75% 30%, #fff 5px, #ff21c0 8%, #5b5b5b 60%, #ff21c0 100%);
border-radius: 50%;
/* 阴影 */
box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc, inset 80px 0 60px #efcde6, inset -20px -60px 100px #f9f6de, inset 0 50px 140px #f9f6de, 0 0 90px #fff;
/* 执行动画：动画名 时长 加速后减速 无限次播放 */
animation: bubble 4s ease-in-out infinite;
}
.shadow {
background-color: rgba(0, 0, 0, 0.15);
width: 150px;
height: 40px;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: -100px;
/* 一丢丢模糊效果· */
filter: blur(1px);
/* 执行动画：动画名 时长 加速后减速 无限次播放 */
animation: shadow 4s ease-in-out infinite;
}
/* 泡泡动画 */
@keyframes bubble {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-80px);
}
}
/* 阴影动画 */
@keyframes shadow {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div class="container">
<div class="bubble"></div>
<div class="shadow"></div>
</div>
</body>
</html>
效果图
2.代码叙述着我们的爱情故事
文件太多了只放主界面代码,文章末尾放下载链接
<!DOCTYPE HTML>
<html>
<head>
<title>Our Love Story</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital.ttf') format("truetype");
}
</style>
<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">##</span><br/>
<span class="comments"># I am a programmer,</span><br/>
<span class="comments"># so I write code to celebrate Valentine's Day in coder's way.</span><br/>
<span class="comments">##</span><br/>
i = Boy(<span class="string">"Qingcai Cui"</span>);<br/>
u = Girl(<span class="string">"Qian Ma"</span>);<br/>
<span class="comments"># Oct 14, 2018, I meet you because of PyCon 2018. </span><br/>
i.meet(u)<br/>
<span class="comments"># Afterwards, I confessed to you. </span><br/>
i.confess(u)<br/>
<span class="comments"># Nov 5, 2018, You became my girlfriend.</span><br/>
u.accepted(i)<br/>
<span class="comments"># Since then, we spent harmony happiness life every day.</span><br/>
happy(u, i)<br/>
<span class="comments"># We enjoy studying together.</span><br/>
study(u, i)<br/>
<span class="comments"># We enjoy cuisine together.</span><br/>
dine(u, i)<br/>
<span class="comments"># We enjoy appointment together.</span><br/>
appoint(u, i)<br/>
<span class="comments"># We enjoy vacation together.</span><br/>
vacation(u, i)<br/>
<span class="comments"># Sometimes there are a few conflicts between us.</span><br/>
conflict(u, i, sometimes=<span class="keyword">True</span>)<br/>
<span class="comments"># But we are getting more and more in harmony together.</span><br/>
u.in_harmony_with(i) <br/>
i.in_harmony_with(u) <br/>
<span class="comments"># You are the greatest love of my life.</span><br/>
while <span class="keyword">True</span>:<br/>
<span class="placeholder"></span><span class="keyword">if</span> u.with(i):<br/>
<span class="placeholder"></span><span class="placeholder"></span>u = everything<br/>
<span class="placeholder"></span><span class="keyword">else</span>:<br/>
<span class="placeholder"></span><span class="placeholder"></span>everything = u<br/>
<span class="comments"># Waiting me marries you, we will be the happiest couple in the world.</span><br/>
i.marry(u, in_the_future=<span class="keyword">True</span>)<br/>
i.live_happily_forever_with(u)<br/>
<span class="comments"># I love you forever.</span><br/>
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
Qian, I have fallen in love with you for
<div id="elapseClock"></div>
</div>
<div id="loveu">
Love u forever and ever.<br/>
<div class="signature">- Qingcai Cui | Germey</div>
</div>
</div>
</div>
</div>
<div id="copyright">
Copyright © 2020 <a href='http://cuiqingcai.com'>cuiqingcai.com</a> 2014-2020
</div>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
// 此处月份介于 0 ~ 11 之间。用本地时间表示，如 8 月要用 7 表示。
together.setFullYear(2018, 10, 5);
together.setHours(15);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
</script>
</body>
</html>
效果图:
本文参考:
1.萌翻少女的发光果冻泡泡 来自微信公众号:笑谈科技
2.代码叙述着我们的爱情故事 来自: https://github.com/Germey/ValentinesDay 在线演示版本:https://love.cuiqingcai.com/
参考网页:2022的七夕，奉上7个精美的表白代码，同时教大家快速改源码自用 - 奇想派 - 博客园 (cnblogs.com)
码叙述着我们的爱情故事 来自: https://github.com/Germey/ValentinesDay 在线演示版本:https://love.cuiqingcai.com/
参考网页:2022的七夕，奉上7个精美的表白代码，同时教大家快速改源码自用 - 奇想派 - 博客园 (cnblogs.com)
本地下载链接正在审核,等审核完毕放于评论区,下载资源免费.
8389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
