送出去一封情书吧

本篇内容为利用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);
}
相关推荐
爱吃青椒不爱吃西红柿‍️1 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你4 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜7 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑15 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX17 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12526 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12533 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00142 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript