茗叙
咳咳,失踪人口也是回归了.最近吗还行吧,上个月考试了,还不错.英语明显进度了,但是之前的优势科目拉下了,也是拆东墙补西墙.转眼间又要考试了(下周)
也是好久没更新了,之前看到一个文章hexo 添加 ai总结的,但是不晓得我收藏到哪里了,哎呀,拖延症又犯了.
今天这个文章主要为抖音上蛮火的 '卡片提醒' 这个吗?你要说我自己写的吗?对对,是我自己用输入提示词告诉AI生成的,哈哈哈~ (娱乐就好!)
茗述
浅浅的水一篇文章吧!
展示效果如下! 网址如下:
这个音乐吗! 后面再说吧,有兴趣的可以自己添加哦!,不说了我要去做头部组织切割手术了!
源码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>茗辰原 的 温柔提醒生成器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f0f2f5;
padding: 20px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 500px;
width: 100%;
}
.step {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.step h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 8px;
color: #666;
}
input,
select,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #66b1ff;
}
.color-options,
.size-options,
.music-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.color-option,
.size-option,
.music-option {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.color-option.selected,
.size-option.selected,
.music-option.selected {
border-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.message-bubbles {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff;
border-radius: 0;
padding: 20px;
overflow: hidden;
z-index: 999;
}
.bubble {
position: absolute;
border-radius: 15px;
padding: 8px 12px;
max-width: 140px;
word-break: break-all;
animation: bubbleCycle 7s ease-in-out infinite;
opacity: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 轻微阴影增加层次 */
}
/* 新增悬浮移动：上下左右轻微晃动 */
@keyframes bubbleCycle {
0% {
opacity: 0;
transform: scale(0.5) translate(0, 0);
}
15% {
opacity: 1;
transform: scale(1) translate(0, 0);
}
35% {
transform: translate(5px, -3px);
}
55% {
transform: translate(-4px, 5px);
}
75% {
transform: translate(3px, -2px);
}
85% {
opacity: 1;
transform: scale(1) translate(0, 0);
}
100% {
opacity: 0;
transform: scale(0.5) translate(0, 0);
}
}
.btn-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.hidden {
display: none;
}
.mt-10 {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div id="step1" class="step">
<h2>温柔提醒</h2>
<div class="form-group">
<label>你想给哪个朋友？</label>
<input type="text" id="friendName" placeholder="输入朋友昵称" />
</div>
<button onclick="goToStep2()">下一步</button>
</div>
<div id="step2" class="step hidden">
<h2>选择方框颜色</h2>
<div class="color-options" id="colorOptions">
<div class="color-option selected" data-color="random">随机彩色</div>
<div class="color-option" data-color="pink">温柔粉</div>
<div class="color-option" data-color="blue">天空蓝</div>
<div class="color-option" data-color="yellow">阳光黄</div>
<div class="color-option" data-color="green">清新绿</div>
<div class="color-option" data-color="purple">梦幻紫</div>
</div>
<div class="btn-group">
<button onclick="goToStep1()">上一步</button>
<button onclick="goToStep3()">下一步</button>
</div>
</div>
<div id="step3" class="step hidden">
<h2>选择方框大小</h2>
<div class="size-options" id="sizeOptions">
<div class="size-option" data-size="small">小巧</div>
<div class="size-option selected" data-size="medium">适中</div>
<div class="size-option" data-size="large">大气</div>
</div>
<div class="btn-group">
<button onclick="goToStep2()">上一步</button>
<button onclick="goToStep4()">下一步</button>
</div>
</div>
<div id="step4" class="step hidden">
<h2>选择背景音乐</h2>
<div class="music-options" id="musicOptions">
<div class="music-option selected" data-music="random">随机选择</div>
<div class="music-option" data-music="song1">好想爱这个世界啊 - 华晨宇</div>
<div class="music-option" data-music="song2">I Miss You So - Laufey</div>
<div
class="music-option"
data-music="https://s1.aigei.com/src/aud/mp3/fe/fe5fc3bfae5d434da89dfb9b3e89e357.mp3?e=1762674780&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:cT9MNNHcuF6ZNA6AOhJzZg-x4sw="
>
路过人间 - 郁可唯
</div>
<div class="music-option" data-music="song4">恋人 - 李荣浩</div>
<div class="music-option" data-music="song5">说好不哭 - 周杰伦</div>
</div>
<div class="btn-group">
<button onclick="goToStep3()">上一步</button>
<button onclick="goToStep5()">下一步</button>
</div>
</div>
<div id="step5" class="step hidden">
<h2>选择内容</h2>
<button onclick="useDefaultContent()">使用自带内容</button>
<button onclick="useCustomContent()">自己写内容</button>
<button onclick="goToStep4()" class="mt-10">上一步</button>
</div>
<div id="step6" class="step hidden">
<h2>写下你想说的话</h2>
<textarea id="customContent" rows="5" placeholder="每行一句，至少写15句"></textarea>
<div class="btn-group">
<button onclick="goToStep5()">上一步</button>
<button onclick="generateBubbles()">下一步</button>
</div>
</div>
<div id="result" class="message-bubbles hidden">
<button
onclick="goToStep1()"
style="position: absolute; top: 10px; right: 10px; z-index: 100;"
>
重新开始
</button>
</div>
</div>
<script>
let currentStep = 1
let friendName = ''
let color = 'random'
let size = 'medium'
let music = 'random'
let content = []
let bubbleInterval
// 扩充全色系颜色库（新增柔和深色，增加层次）
const allColors = [
'#ff9aa2',
'#ffb7b2',
'#ffddd2',
'#e2f0cb',
'#b5ead7',
'#c7ceea',
'#b5d8eb',
'#ffeaa7',
'#dda0dd',
'#98d8c8',
'#f7dc6f',
'#bb8fce',
'#85c1e9',
'#f8c471',
'#82e0aa',
'#ffc3a0',
'#dab894',
'#f0e68c',
'#e6e6fa',
'#ffb6c1',
'#add8e6',
'#f0fff0',
'#fff8dc',
'#faf0e6',
'#f5f5dc',
'#ffecd2',
'#fcb69f',
'#cbd5e1',
'#94a3b8',
'#7dd3fc',
'#a5d6a7',
'#ce93d8',
'#ffab91',
'#80deea',
'#b39ddb',
]
// 步骤切换函数
function goToStep1() {
if (bubbleInterval) clearInterval(bubbleInterval)
hideAllSteps()
document.getElementById('step1').classList.remove('hidden')
currentStep = 1
}
function goToStep2() {
friendName = document.getElementById('friendName').value
if (!friendName) {
alert('请输入朋友昵称')
return
}
hideAllSteps()
document.getElementById('step2').classList.remove('hidden')
currentStep = 2
}
function goToStep3() {
hideAllSteps()
document.getElementById('step3').classList.remove('hidden')
currentStep = 3
}
function goToStep4() {
hideAllSteps()
document.getElementById('step4').classList.remove('hidden')
currentStep = 4
}
function goToStep5() {
hideAllSteps()
document.getElementById('step5').classList.remove('hidden')
currentStep = 5
}
function goToStep6() {
hideAllSteps()
document.getElementById('step6').classList.remove('hidden')
currentStep = 6
}
function hideAllSteps() {
document.querySelectorAll('.step, #result').forEach((el) => el.classList.add('hidden'))
}
// 选择项通用处理
document.querySelectorAll('.color-option, .size-option, .music-option').forEach((option) => {
option.addEventListener('click', function () {
const parent = this.parentElement
parent.querySelectorAll('div').forEach((el) => el.classList.remove('selected'))
this.classList.add('selected')
const type = parent.id.replace('Options', '')
window[type] = this.getAttribute(`data-${type}`)
})
})
// 使用自带内容
function useDefaultContent() {
const defaultMessages = [
'记得好好吃饭',
'早点休息',
'多喝热水',
'别熬夜了',
'注意身体',
'天冷了多穿点衣服',
'累了就休息一下吧',
'不开心可以找我聊',
'你已经很棒了',
'慢慢来没关系',
'有我陪着你',
'我一直都在你身边',
'出门记得带伞',
'你不是一个人',
'我想你了',
'要保重身体',
'别想太多',
'开心最重要',
'心情不好就说出来吧',
'别太勉强自己',
'做自己就好',
'谢谢你的存在',
'有你真好',
'今天也辛苦了，给自己一点时间',
'你很重要',
'听听喜欢的音乐吧',
'出去走走吧',
'吃点好吃的犒劳自己',
'睡睡大心情会好一点',
'我相信你可以',
'别忘了笑一笑',
'做点让自己开心的事',
'给自己放个假吧',
'可以依靠别人的',
'求助不是软弱',
'不需要完美',
'接纳真实的自己',
'你的节奏很好',
'别和别人比',
'你有自己的时区',
'每一步都算数',
'休息不是浪费时间',
'把自己放在第一位',
'要照顾好自己',
'学会说不',
'守护自己的边界',
'你的需求很重要',
'困难会过去的',
'允许自己犯错',
'别委屈自己',
'对自己好一点',
'重新开始也可以',
'给自己多点耐心',
'失败了也没关系',
'一切都会好起来的',
'已经做得很好了',
'你比想象中强',
]
content = defaultMessages.map((msg) => `${friendName}，${msg}`)
generateBubbles()
}
// 使用自定义内容
function useCustomContent() {
goToStep6()
}
// 生成消息气泡（优化调整）
function generateBubbles() {
if (currentStep === 6) {
const customText = document.getElementById('customContent').value
content = customText
.split('\n')
.filter((line) => line.trim())
.map((line) => `${friendName}，${line.trim()}`)
if (content.length < 15) {
alert('请至少输入15句内容')
return
}
}
const resultDiv = document.getElementById('result')
resultDiv.innerHTML = ''
// 重新开始按钮
const button = document.createElement('button')
button.onclick = goToStep1
button.style.position = 'absolute'
button.style.top = '10px'
button.style.right = '10px'
button.style.zIndex = '100'
button.textContent = '重新开始'
resultDiv.appendChild(button)
// 气泡大小映射（微调尺寸，更协调）
const sizeMap = { small: '12px', medium: '14px', large: '16px' }
const fontSize = sizeMap[size]
function createRandomBubble() {
const randomContentIndex = Math.floor(Math.random() * content.length)
const msg = content[randomContentIndex]
const bubble = document.createElement('div')
bubble.className = 'bubble'
bubble.textContent = msg
// 随机颜色
const randomColor = allColors[Math.floor(Math.random() * allColors.length)]
bubble.style.backgroundColor = randomColor
bubble.style.fontSize = fontSize
// 优化随机位置（扩大范围，减少空白）
bubble.style.left = `${Math.random() * 92 + 1}%` // 1%-93%
bubble.style.top = `${Math.random() * 92 + 1}%`
// 优化层级（1-200），层级差异更大
bubble.style.zIndex = Math.floor(Math.random() * 200)
// 随机动画延迟（0-6秒），出现更错落
bubble.style.animationDelay = `${Math.random() * 6}s`
resultDiv.appendChild(bubble)
// 7秒后移除气泡（与动画周期一致）
setTimeout(() => {
bubble.remove()
}, 7000)
}
// 清除旧定时器
if (bubbleInterval) clearInterval(bubbleInterval)
// 调整生成节奏：初始65个，每0.12秒生成1个（更密集但不拥挤）
for (let i = 0; i < 65; i++) createRandomBubble()
bubbleInterval = setInterval(createRandomBubble, 120)
hideAllSteps()
resultDiv.classList.remove('hidden')
}
</script>
</body>
</html>