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

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


1. Demo 介绍

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

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

这是下面的效果:

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

image.png

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

image.png

2. Demo实现

2.1 布局 和 样式方面

布局:

image.png

2.2 样式和布局 总结

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

2.3 祝福文案随机

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

image.png

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

js

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" 时,元素的内容可以被用户编辑。

html

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

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

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

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

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

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

  • html2canvas

js

const targetElement = document.getElementById('target');
html2canvas(targetElement).then(function(canvas) {
  document.body.appendChild(canvas); // 在页面中插入生成的 canvas 元素
});
  • FileSaver.js

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 对象并保存为本地文件。

js

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

3. 本Demo使用到的网站

3.1 渐变

grabient

image.png

3.2 按钮

buttons-generator

image.png

3.3 调色板

mycolor

image.png

4. Demo地址

github

gitee

5. 结语

祝大家在新的一年里面, 工作顺利, 身体健康🥰🥰🥰. 向着自己向往的样子而努力奋斗!!!✊✊✊


目录
相关文章
|
11天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
33 1
[HTML、CSS]细节与使用经验
|
12天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
27 1
[HTML、CSS]知识点
|
7天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
30 1
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
11天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
25 4
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
34 0
html5+three.js公路开车小游戏源码
|
18天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
18天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。