❤[白嫖电子贺卡]小白实战——翻转情书贺卡（发给你最爱的她）

阳阳羊
1,425 阅读3分钟

效果如下：

QQ录屏20231102111202_-original-original.gif

话不多说，直接上代码：

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="book p3d">
        <div class="front-cover p3d">
            <div class="inside page p3d flip">
                <p>亲爱的XXX，我用这篇情书表达我内心深处的感受，向你诉说我对你的深深爱意。见到你的那一刻起，你的温柔与美丽就深深地吸引着我，让我心动不已。 每次和你相聚，我的心跳似乎变得更快。你的笑容如阳光般灿烂，每一个眼神都能融化我内心的冰霜。你的聪明才智和善解人意让我感到无比敬佩，我觉得自己是世界上最幸运的人，能有机会与你共度每一天。
                </p>
            </div>
            <div class="outside page">
            </div>
        </div>
        <div class="back-cover p3d">
            <div class="outside page"></div>
            <div class="inside page p3d">
                <div class="shadow"></div>
                <div class="card"></div>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS样式：

*{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    box-sizing: border-box;/*将容器申明成IE模型*/
}
html{
    height: 100%;
}
body{
    height: 100%;
    font: 100%/1.25 Helvetica,arial,仿宋;
    perspective: 1000px;
    background-color: pink;
    background-image: linear-gradient(to bottom,rgb(247, 242, 154),#f79090);
}
.p3d{
    transform-style: preserve-3d;
}
.book{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    color:#fff;
    -webkit-transform: rotateX(60deg);
    /* -moz-transform: rotateX(60deg);
    -o-transform: rotateX(60deg); */
    user-select: none;
}
.front-cover{
    cursor: move;
    transform-origin: 0 50%;
    transform: rotateY(0deg);
}
.page{
    width: 300px;
    height: 300px;
    padding: 1em;
    position: absolute;
    left: 0;
    right: 0;
    text-indent: 2em;
}
.inside{
    background-color: #f79090;
}
.outside{
    background-color: #fff;
}
.front-cover .outside{
    background-image: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.oWr0-UcLkYBGedCwTIN2LAHaHa?w=192&h=194&c=7&r=0&o=5&dpr=1.3&pid=1.7);
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(3px);
}
.flip{
    transform: rotateY(180deg);
}
.back-cover .outside{
    transform: rotateZ(-3px);
}
.back-cover .inside{
    background-color: #f79090;
}

.shadow,
.card{
    background-color: rgba(0,0,0,0.5);
    width: 196px;
    height: 132px;
    position: absolute;
    left: 60px;
    top: 60px;
    transform-origin: 0 100%;
}
.shadow{
    background-color: rgba(0,0,0,0.5);
}
.card{
    background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.zuHVOAp1LoRzzkHAUE9gbwHaE8?w=295&h=196&c=7&r=0&o=5&dpr=1.3&pid=1.7);
    background-repeat: no-repeat;
    background-size: cover;
}

JavaScript实现交互：

var front = document.getElementsByClassName('front-cover')[0];
var book = document.getElementsByClassName('book')[0];
var card = document.getElementsByClassName('card')[0];
var shadow = document.getElementsByClassName('shadow')[0];
var hold=false;
var clamp = function(val,min,max) {
    return Math.max(min,Math.min(val,max))
}
//鼠标按下
front.onmousedown = function(){
    hold=true;
}
//鼠标松开
window.onmouseup = function(){
    hold=false;
}
//判断是否按下
window.onmousemove = function(e){
    if(hold){//修改左半本书的角度，卡片旋转，阴影倾斜
        var deg = clamp((window.innerWidth / 2 -e.x +300)/300 * -90,-180,0)
        front.style.transform = `rotateY(${deg}deg)`
        //整本书立起来
        var bookdeg=deg /8 +60
        book.style.transform = `rotateX(${bookdeg}deg)`        
        var carddeg=deg /2
        card.style.transform = `rotateX(${carddeg}deg)`        
        var shadowdeg=deg /8
        shadow.style.transform = `skew(${shadowdeg}deg)`
    }
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    box-sizing: border-box;  /*将容器声明成IE模型*/
}

浏览器默认会给body加一个内外边距，所以我们将其设置为0，之前文章我们了解知道了，CSS中有两种盒模型，我们现在将其设置为box-sizing：border-box IE盒模型，为了让页面效果更完美的展现出来。

    -webkit-transform: rotateX(60deg);
    -moz-transform: rotateX(60deg);
    -o-transform: rotateX(60deg);

他们分别是针对不同浏览器的前缀，以兼容不同浏览器。在现代浏览器中，大多数已经支持transform属性并可以省略前缀，文中我们注释掉后两个，作用是将元素绕X轴旋转60度可以根据实际需求而定。

var front = document.getElementsByClassName('front-cover')[0];
var book = document.getElementsByClassName('book')[0];
var card = document.getElementsByClassName('card')[0];
var shadow = document.getElementsByClassName('shadow')[0];

js文件中的这四行代码获取这四个元素，用于后面的功能实现。

    var deg = clamp((window.innerWidth / 2 -e.x +300)/300 * -90,-180,0)
    front.style.transform = `rotateY(${deg}deg)`//修改左半本书的角度
    var bookdeg=deg /8 +60
    book.style.transform = `rotateX(${bookdeg}deg)`//整本书立起来
    var carddeg=deg /2
    card.style.transform = `rotateX(${carddeg}deg)`//卡片旋转
    var shadowdeg=deg /8
    shadow.style.transform = `skew(${shadowdeg}deg)`//阴影倾斜

功能实现如注释。

代码中还可以添加或修改自己需要的成分，比如：

  • 在html代码中修改p标签的内容，就是修改情书的文字部分；

  • 在css代码中修改front-cover .outside的background-image地址可以修改封面图片；card的background-image地址可以修改贺卡内立起来的图片；其他color属性就可以修改颜色属性，可以根据朋友的喜好设定。

如果这些对你有帮助，可以给个免费的小红心吗，或者如果对代码有疑惑，哪里需要改进的，欢迎大家评论区留言喔！谢谢啦！

最后

我的Gitee：   CodeSpace (gitee.com)

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞 收藏+关注” ，感谢支持！！

avatar
文章
阅读
粉丝