【七夕特辑】html+css 写一个情诗表白墙

路人高
1,637 阅读2分钟

我正在参与掘金创作者训练营第5期，点击了解活动详情

前言

一年一度的七夕又要到了。想想去年是一个人过的七夕，没想到今年...还是一个人😭

虽然身为一个直男，可是也有追求浪漫的权利，所以有了这个垃圾demo牛逼项目!

iShot_2022-08-02_16.23.51.gif

实现

内容选择

七夕节作为我国民间的传统节日，很容易就想到了历史。再加上情人节的加持，答案呼之欲出——情诗！

(本来是打算用土味情话当内容的，但是实在太油)

配色

考虑用不停的渐变色填充网页背景，由于审美比较拉胯，所以配色选择去这个网站uigradients.com

image.png

编写css代码

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(145deg, #ee9ca7, #ffdde1, #FBD786, #f7797d, #c471ed, #2980b9, #8e44ad, #f7797d);
    background-size: 500%;
	font-family: "楷体","楷体_GB2312";
    animation: bg 60s linear infinite;
}

这样，一个好看的网页就出来了。

内容处理

获得数据

去某个网站抓取了100个有关爱情的古诗，清洗后存入数据库，就有了这种数据

image.png

然后浅浅写个接口并且部署到服务器上面:api.love.babygao.cn/love

const url = 'http://api.love.babygao.cn/love'

var request = new XMLHttpRequest();
request.open('GET', url, isSync);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
request.send(null);
if (request.status === 200) {
    return request.responseText
}

这是最开始的处理方式，但是感觉为了这样一个简单的demo还要写个接口有点麻烦，所以后面选择把数据以json文件的形式读取。

文本处理

按照我的想法，我希望文字可以是渐隐渐显的显示在网页上，在完全消失后显示下一个/另外的内容。

// html
<body>
    <div id="love-space" class="love-space">
        <div id="love" class="love"></div>
        <div id="love-from" class="love-from"></div>
    </div>
</body>

// css
.love-space {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.love{
    color: #fff;
    font-size: 2rem;
	margin-bottom: 0.2rem;
	text-shadow: 0 0 10px rgba(255, 255, 255, .3);
}
.love-from{
	padding: 0 20px;
    color: #fff;
    font-size: 1.5rem;
}


// js

let love_space = document.getElementById('love-space')
let love = document.getElementById('love')
let love_from = document.getElementById('love-from')
if (loves) {
    love.innerHTML = say_love.title
    love_from.innerHTML = say_love.author
    love_space.style.animation = "textHide 10s linear infinite"
}

总结

代码比较简单，实现方式也比较粗糙，就不贴代码了

项目预览地址: love.babygao.cn

avatar
文章
阅读
粉丝