likes
comments
collection
share

用技术创意，定制专属祝福

作者站长头像
站长
· 阅读数 21

引言

在这个数字化时代，传统的贺卡已经逐渐被电子贺卡所取代。而如果想要给对方送上一份特别的祝福，何不动手制作一张个性化的电子贺卡呢？今天，就让我们一起来探讨如何使用HTML、CSS和JavaScript来打造一张别具一格的电子贺卡吧！

贺卡未展开效果：

用技术创意，定制专属祝福 贺卡展开效果：

用技术创意，定制专属祝福

HTML部分

首先，让我们来看看HTML部分。在DIY贺卡中，HTML扮演着承载结构和内容的重要角色。我们需要创建一个电子所需元素的基本布局。这包括贺卡的四个面、贺词以及图片等。确保每个元素都有清晰的命名和结构，为后续的样式和功能提供良好的基础。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日贺卡</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="book p3d">
        <audio id="j-bgm" src="./happy_birthday.mp3"></audio>
        <!-- 右半本书 -->
        <div class="book-cover p3d">
            <!-- 外页 -->
            <div class="page bake flip"></div>
            <!-- 内页 -->
            <div class="page front p3d">
                <!-- 图片阴影 -->
                <div class="shadow"></div>
                <!-- 蛋糕图片 -->
                <div class="pic"></div>
            </div>
        </div>

        <!-- 左半本书 -->
        <div class="front-cover p3d">
            <!-- 内页 -->
            <div class="page front flip p3d">
                <p>
                    亲爱的[收件人的名字]，<br><br>

                    在这特别的一天，我想向你送上最诚挚的祝福！生日快乐！愿你在新的一岁里，充满快乐、健康、幸福和成功。

                    不论是风和日丽的阳光，还是细雨飘飘的夜晚，愿你都能感受到生活的美好和温暖。愿你的心中永远充满希望和正能量，笑容永远灿烂如花。

                    感谢你在我生活中的陪伴和支持，希望我们的友谊能像阳光一样灿烂耀眼，无悔青春，共同成长。

                    祝你生日快乐！<br><br>

                    [您的名字] 敬上
                </p>
            </div>
            <!-- 外页 -->
            <div class="page back"></div>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

CSS部分

接下来，让我们来谈谈CSS部分。通过CSS，我们可以为贺卡添加样式，使其看起来更加美观和独特。你可以选择不同的颜色、背景和布局来个性化你的贺卡，让整个贺卡更具时尚感和活力。记得保持样式的一致性，让贺卡看起来更加专业和精致。

页面全局配置

* {
    margin: 0;
    padding: 0;
    border: 0;
    block-size: border-box;
}


html {
    height: 100%;
}

body {
    height: 100%;
    font: 100%/1.25 Helvetica, arial, helvetica;
     /* 字体颜色 */
    color: rgb(89, 185, 158);
    /* 透视效果的属性,定义了观察者与 z=0 平面的距离 */
    perspective: 1000px;
    /* 从顶部（#444 颜色）开始向底部（#999 颜色）逐渐变化，形成一个垂直的渐变效果 */
    background: linear-gradient(to bottom, #444, #999);
}

设置贺卡整体样式

.book {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 30%;
    left: 50%;
    /* 将鼠标光标改变为手型指针 */
    cursor: pointer;
    /* 禁止用户选择页面上的文本 */
    user-select: none;
    /*往里倾斜*/
    transform: rotateX(30deg);
}

/* 3d效果 */
.p3d {
    transform-style: preserve-3d;
}

设置贺卡的大小、利用绝对定位将贺卡定到合适的位置，并使用transform: rotateX(30deg)将贺卡向里倾斜30°，打造立体效果。

设置贺卡四页相同样式

.page {
    width: 300px;
    height: 300px;
    /* 相对长度单位，等同于元素字体大小的倍数 */
    padding: 1em;
    position: absolute;
    left: 0;
    top: 0;
}

position: absolute;left: 0;top: 0;将四个面都通过绝对定位都定在父容器的左上角，使四面重叠。

设置贺卡内页、外页基础样式

/* 贺卡的内页 */
.front {
    background-color: rgb(209, 230, 239);
}

/* 贺卡的外页 */
.back {
    background-color: #fff;
}

设置旋转基点

/* 贺卡的左页 */
.front-cover {
    /* 旋转基点 */
    transform-origin: 0 50%;
}

利用transform-origin: 0 50%设置贺卡左页的旋转基点，便于之后贺卡向左翻开

设置贺卡封面

你可以将background-image中的图片地址换为你喜欢的图片，并通过background-position来移动图片位置达到心仪的效果。

.front-cover .back {
    background-image: url(./card.jpg);
    /* 确保整个元素背景完全被填充 */
    background-size: cover;
    background-position: -50px 0;
    transform: translateZ(3px);
}

利用transform: translateZ(3px)在3D空间中通过Z轴平移产生一个视觉上的转换效果。

字体翻转

.flip {
    transform: rotateY(180deg);
}

由于贺词写在贺卡的左内页，为了防止贺词在贺卡翻开后出现字体翻转，我们需要将贺卡左内页提前在X轴上翻转180°。

未翻转前效果：

用技术创意，定制专属祝福

设置贺卡右内侧

.shadow,
.pic {
    width: 196px;
    height: 132px;
    position: absolute;
    left: 60px;
    top: 60px;
    transform-origin: 0 100%; 
}

.pic {
    background-image: url(./cake.png);
    background-size: cover;
}

.shadow {
    background-image: url(./cake_shadow.png);
    background-size: cover;
}
  • position: absolute;通过绝对定位将蛋糕图片以及蛋糕阴影定在右内侧合适位置
  • transform-origin: 0 100%;设置旋转基点为图片左下方，便于之后翻转

JS部分

最后，我们来到JavaScript部分。JavaScript将赋予贺卡翻转功能，并让它在完全打开后播放音乐。

// 获取元素
// 贺卡左页
var page = document.querySelector('.front-cover'); 
// 蛋糕
var pic = document.querySelector('.pic');
// 阴影
var shadow = document.querySelector('.shadow');
// 背景音乐
var bgMusic = document.getElementById('j-bgm');

// 求中间值
var clamp = function (val, min, max) {
    if (val > max) return max;
    if (val < min) return min;
    return val;
}


// 鼠标按下
window.addEventListener('mousedown', () => {
    //鼠标移动
    window.addEventListener('mousemove', handleMouseMove)

    // 鼠标抬起
    window.addEventListener('mouseup', () => {
        window.removeEventListener('mousemove', handleMouseMove);
    });
});


function handleMouseMove(e) {
    
    var angle = clamp((window.innerWidth / 2 - e.pageX + 300) / 300 * -90, -180, 0);
    // 翻开贺卡
    page.style.transform = `rotateY(${angle}deg)`;
    
    // 蛋糕翻转
    pic.style.transform = `rotateX(${angle / 3}deg)`;
    
    // 蛋糕阴影倾斜
    shadow.style.transform = `skew(${angle / 7}deg)`;
    
    // 音乐控制
    angle === -180 ? bgMusic.play() : bgMusic.pause();
}

通过事件监听器实现了一个交互效果，当用户按下鼠标并移动时，页面中的元素会根据鼠标位置进行旋转和倾斜，并播放背景音乐。

结语

通过HTML、CSS和JavaScript的结合，我们可以轻松地打造一张个性化且有趣的电子贺卡，让祝福更加特别！希望这篇文章对你有所帮助，也期待看到你设计出的别具一格的电子贺卡！Happy coding！今天的内容就到这里了。如果你觉得这篇文章有帮助或有所启发，别忘了给我一个鼓励的赞哦！

转载自:https://juejin.cn/post/7361618046597021696
评论
请登录