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


theme: cyanosis
highlight: xcode

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

前言

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

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

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

实现思路

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;
}

动画效果

接下来是,用jQueryanimate函数来实现动画效果。

$(".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个多小时的时间调试,难过。。。

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

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容