使用CSS实现春节随机诗词卷轴——开卷有益，诗词来了

Java星辰
1,785 阅读2分钟

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

马上就要春节了，作为一名后端想用代码表达一下春节相关的祝福、特效，嗯。。。倒是想到了好点子，但是实现起来太复杂了，于是瞄向了前端，嘻嘻~

本文将介绍如何用CSS实现卷轴打开的效果并且在打开后，随机展示出一首春节相关的诗。

代码已经放到了码上掘金上。

实现思路

1. 卷轴准备

卷轴由4部分组成，分别为左右两侧的轴、中间2个背景图组成。考虑到既然是诗词，应该加点古风元素，于是把中间的背景分为了2个部分，一个是纯山水图，另一个带有古风乐器。

<div class="content">
    <div class="l-pic"></div>
    <div class="r-pic"></div>
    <div class="l-bg"></div>
    <div class="r-bg"></div>
</html>

初始状态

默认卷轴是合起来的，要使用js实现动画缓慢打开效果，这里使用了jQuery插件提供的animate来实现的动效。

image.png

中间的背景图，初始样式宽度设置的很窄，只有25px，所以看不到中间的背景图。

.l-bg {
    position: absolute;
    top: -3px;
    left: 430px;
    z-index: 1;
    width: 25px;
    height: 459px;
    background: url("xxxxx") right 0 no-repeat;
}

.r-bg {
    position: absolute;
    top: -4px;
    right: 430px;
    z-index: 1;
    width: 25px;
    height: 459px;
    background: url("xxxxxx") 0 0 no-repeat;
}

动画效果

接下来是，用jQuery的animate函数来实现动画效果。

$(".l-pic").animate({ 'left': '95px', 'top': '-4px' }, 1300);
$(".r-pic").animate({ 'right': '-23px', 'top': '-5px' }, 1450);
$(".l-bg").animate({ 'width': '433px', 'left': '73px' }, 1500);
$(".r-bg").animate({ 'width': '433px', 'right': '-38px' }, 1500, function () {
    $(".main").fadeIn(800);
});

animate函数可以按指定的速度、时间，将对象的样式更改为指定的样式。

fadeIn函数可以逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果），这里用来更改诗词的内容展示。

到这里，卷轴的动画效果就基本实现了。

2. 诗词准备

框架划分

诗词内容展示，诗词是通过js将内容填充到页面元素里的，首先定义诗词展示的基本架构。

将诗词分为：诗词名称(title)、诗词内容(content)、作者区域(author)。

<div class="poet">
    <h1 id="title"></h1>
    <div id="content">
    </div>
    <p class="author">——&lt;<span></span>&gt;<strong></strong></p>
</div>

诗词内容

诗词的内容是准备了一个数组，数组里放的是准备好了的诗词，当然这里也可以使用一些开放api来代替，方便起见，我是初始化一些诗词放入了数组中，例如：

var poets = [
    {
        "title": "除夜",
        "author": "白居易",
        "dynasty": "唐",
        "content": [
            "病眼少眠非守岁，",
            "老心多感又临春。",
            "火销灯尽天明后，",
            "便是平头六十人。"
        ]
    }
]

3. 竖向展示

既然是古代风格，那么展示时，诗词内容应该竖着排列而不是像现在似的横着排列。

只要添加一个样式就能把文字竖向排列：writing-mode: vertical-rl。

根据内容的展示，需要把文字居中展示以及防止竖排内容折叠，需要设置文字居中和最小高度。

.poet {
    writing-mode: vertical-rl;
    min-height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

随机展示

代码运行后，每次刷新都会随机展示一篇诗词，这里用到的是随机函数，然后结合诗词数组的长度获取一个随机数，这个随机数对应的是诗词数组的下标，然后根据下标获取诗词内容进行填充。

let len = poets.length;
let idx = Math.floor(Math.random() * len);
let poet = poets[idx];

$("#title").html(poet.title)
$(".author span").html(poet.dynasty)
$(".author strong").html(poet.author)

poet.content.forEach(e => {
    $('#content').append("<p>" + e + "</p>")
});

这样，每次刷新就会随机出一篇诗词啦。

遇到问题

在“码上掘金”调试代码时，因为用到了jQuery插件，也引入了jQuery链接不知道为什么运行代码依然提示我找不到$，然后把用到的jQuery函数又用原生js实现了一遍，虽然是实现了，但是效果和原来不同了。

最后又换了几个jQuery版本又可以使用了，瞎折腾了一下午。

总结

本位介绍了如何使用CSS实现春节随机诗词卷轴，功能很简单，对于各位前端大佬来说简直分分钟的事，对于只是略懂前端的我来说却耗了1个多小时的时间调试，难过。。。

如果你觉得本文还可以的话，辛苦各位大佬动动手指给作者点个赞吧~

avatar
文章
阅读
粉丝