送出去一封情书吧

本篇内容为利用CSS实现书页的翻动,成果展示如下:

随着鼠标的拖动,书页随之展开,是不是很浪漫呢,如果可以的话,请送一封情书给她。

以下为详细代码及解释

HTML代码

  • <body > 部分: - 定义了一个类名为 bookdiv 元素,它包含了书的各个部分。 - 书的封面有一个前后两面,通过 div 元素和相应的类进行定义。 - 封面上有一个显示文本的部分和一个图片(pic)以及一个阴影(shadow)。
  • JavaScript 部分: - 定义了一个变量 hold 来表示鼠标是否按下。 - 处理鼠标按下和移动事件,根据鼠标位置计算并设置页面、图片和阴影的旋转角度,实现 3D 效果。 总的来说,这段代码用于创建一个具有动态 3D 效果的书本模型网页。
复制代码
<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="book-cover p3d">
            <div class="page back 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>

                    世界上就是会有那么多无可奈何的事,只要让自己看起来不那么傻就好了。
                </p>
            </div>
            <div class="page back"></div>
        </div>
     </div>
     <script>
        // 鼠标摁住事件
        // 鼠标移动事件
        var hold = false
        var page = document.querySelector('.front-cover')
        var pic = document.querySelector('.pic')
        var shadow = document.querySelector('.shadow')
        var clamp = function(val, min, max) {
          return Math.max(min, Math.min(val, max))
        }
    
    
        page.onmousedown = function () {
          hold = true
        }
        window.onmouseup = function () {
          hold = false
        }
    
        window.onmousemove = function(e) {  // 摁住才能执行
          if (hold == true) {
            console.log(e.pageX);
            var angle = clamp((window.innerWidth / 2 - e.pageX + 300) / 300 * -90, -180, 0)
    
            page.style.transform = `rotateY(${angle}deg)`
    
            // pic 要立起来 饶x轴旋转  angle / 2
            pic.style.transform = `rotateX(${angle / 2}deg)`
            // shadow 要倾斜x  angle / 8
            shadow.style.transform = `skewX(${angle / 8}deg)`
    
          }
        }
    
      </script>
    
</body>
</html>

CSS代码

  • htmlbody 选择器:设置了页面的高度、字体、颜色和背景样式。

  • .book 选择器:

    • 设置了书本的宽度、高度、位置、鼠标样式等。
    • 应用了 rotateX(60deg) 进行旋转。
  • .page 选择器:设置了页面的宽度、高度和内边距。

  • .front.back 选择器:分别设置了正面和背面的背景颜色。

  • .front-cover 选择器:

    • 设置了旋转原点。
    • 应用了初始的旋转角度。
  • .p3d 选择器:应用了 3D 变换样式。

  • .front-cover.back 选择器:设置了背面的背景图像、尺寸和位置。

  • .flip 选择器:应用了特定的旋转角度。

  • .shadow.pic 选择器:设置了它们的宽度、高度、位置和旋转原点。

  • .pic 选择器:设置了背景图像和尺寸。

css 复制代码
*{
    margin: 0;
    border:0;
    box-sizing: border-box;
}

html{
    height: 100%;
}

body{
    height: 100%;
    font: 100%/1.25 Helvetica,arial,helvetica;
    color: aliceblue;
    perspective: 1000px;
    background: #444;
    background: linear-gradient(to bottom,#337606,#db5277)
}
.book{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top:50%;
    margin-top: -150px;
    cursor: pointer;
    user-select: none;
    transform:rotateX(60deg);
}
.page{
    width: 300px;
    height: 300px;
    padding:lem;
    position:absolute;
    left: 0;
    top: 0;
    text-indent: 2em;
}
.front{
    background-color: #2b7cd9;
}
.back{
    background-color: #fff;
}
.front-cover{
    transform-origin: 0 50%;
    transform:rotateY(0deg);
}
.p3d{
    transform-style: preserve-3d;
}
.front-cover .back{
    background-image:url(https://img0.baidu.com/it/u=1532020850,8640012&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=706);
    background-size: cover; 
    transform: translateZ(3px);
}
.flip{
    transform: rotateY(180deg);
}
.shadow,.pic{
    width: 196px;
    height: 132px;
    position:absolute;
    left: 60px;
    top: 60px;
    transform-origin: 0 100%;

}
.pic{
    background: url(https://img0.baidu.com/it/u=2071831042,3296883066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313);
    background-size: cover;
}
.shadow{
    background-color: rgba(red, green, blue, alpha);
}
相关推荐
我要洋人死16 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人28 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人28 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR34 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香36 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969339 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai44 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#