使用html,css,js 实现一个龙年春节祝福卡片效果

心安事随

发布于 2024-07-29 18:27:44

21100

代码可运行

文章被收录于专栏：前端大合集前端大合集

运行总次数：0

代码可运行

1. Demo 介绍

前天看到掘金酱发的这个活动,便想着参加一下. 毕竟有奖品哈哈哈.

然后呢,我打算实现了一个春节祝福卡片的效果.

这是下面的效果:

点击按钮之后,进入卡片背面,也就是主要内容的一面
可以编辑title 和 content 内容区域
content 的文案可以点击小龙随机生成一个

同时也支持保存当前卡片,保存本地

2. Demo实现

2.1 布局和样式方面

布局:

其实有两个卡片,使用的相对和绝对定位重叠到了一起, 然后都设置了背面可见或不可见属性- backface-visibility,具体可以看我这篇文章,专门讲解了一下这个方法了解 css中 backface-visibility 属性
前面那个卡片使用图片进行填充, 后面那个卡片进行内容的展示, 具体使用到的布局方式: 相对定位和绝对定位.
然后外层是一个图片边框

2.2 样式和布局总结

布局和样式倒没有什么可以说的,唯一就是那个卡片3d翻转效果, 主要用到了backface-visibility 属性

2.3 祝福文案随机

祝福文案我让chatGpt 给我生成了一份json格式的数据, 别说,真的蛮方便的. 而且质量也很可以.

通过fetch 读取到这个json 文件,拿到数据, 进行随机获取, 然后将获取到的数据,插入到页面Dom元素上

        const btn = document.querySelector('.btn');
        const card = document.querySelector('.card');
        // 获取到龙图元素
        const long = document.getElementById('logo');
        // 获取到祝福文本元素
        const greetings = document.querySelector('.greetings');


        // 获取新年文案的方法
        const getGreet = async () => {
            const res = await fetch('./assets/data.json');
            const data = await res.json();
            //   随机取出data的某一项
            const randomIndex = Math.floor(Math.random() * data.length);
            const randomtext = data[randomIndex].text;

            return randomtext
        }
        
        

        // 插入新年文案
        const insertText = async () => {
            greetings.innerHTML = await getGreet();
        }
        
        // 点击龙切换祝福语
        long.addEventListener('click', function () {
            // 随机文本插入
            insertText()
            // 发出音效
            var audio = new Audio();
            audio.src = './assets/long.mp3';
            audio.autoplay = true;

        })

2.4 祝福人和祝福语,可以直接编辑

contenteditable 是一个 HTML 属性，用于使元素可编辑。当将 contenteditable 属性设置为 "true" 时，元素的内容可以被用户编辑。

<div class="title" contenteditable="true">亲爱的掘友们</div>
  <br>
<div class="greetings" contenteditable="true">春节到了, 
    愿您携一份开朗的心情,过好每一天, 做一个积极乐观的人,
    展望一个金灿灿的未来. 身体健康, 万事如意, 心想事成,早日暴富
 </div>

contenteditable 属性在大多数现代浏览器中得到支持，但在某些旧版本的浏览器中可能存在不一致的行为。因此，在使用时要进行兼容性测试，并确保所需的功能在目标浏览器中正常工作。

2.5 截取指定元素的内容,保存图片到本地

这里我们使用到了两个第三方库

html2canvas：它是一个流行的 JavaScript 库，用于在浏览器中将 DOM 元素转换为 canvas。它的主要功能是将网页中的可见内容（包括 HTML 元素、CSS 样式、图像等）绘制到一个 canvas 元素中，从而实现截图、快照或生成图像等功能。
FileSaver.js：它是一个用于在浏览器中保存文件的 JavaScript 库。它提供了一种简单的方法来生成 Blob 对象，并将其保存为本地文件。FileSaver.js 支持在浏览器中保存各种类型的文件，例如文本文件、图像文件、PDF 文件等。

下面展示一下基本的用法:

html2canvas

const targetElement = document.getElementById('target');

html2canvas(targetElement).then(function(canvas) {
  document.body.appendChild(canvas); // 在页面中插入生成的 canvas 元素
});

FileSaver.js

const blob = new Blob(['Hello, World!'], { type: 'text/plain;charset=utf-8' });
saveAs(blob, 'hello.txt');

创建一个包含字符串 'Hello, World!' 的 Blob 对象，并使用 saveAs 函数将其保存为名为 'hello.txt' 的文本文件。

介绍完基本用法之后, 看看我们的demo 里面如何写的

获取卡片内容元素,使用html2canvas转换为一个 canvas 对象，然后使用 FileSaver.js 库将 canvas 转换为 Blob 对象并保存为本地文件。

        function captureAndSave() {
            const targetElement = document.getElementById('target');

            html2canvas(targetElement).then(function (canvas) {
                canvas.toBlob(function (blob) {
                    // 使用 FileSaver.js 保存 Blob 对象到本地文件
                    saveAs(blob, 'screenshot.png');
                });
            });
        }