本篇内容为利用CSS实现书页的翻动,成果展示如下:
随着鼠标的拖动,书页随之展开,是不是很浪漫呢,如果可以的话,请送一封情书给她。
以下为详细代码及解释
HTML代码:
- <body > 部分: - 定义了一个类名为
book
的div
元素,它包含了书的各个部分。 - 书的封面有一个前后两面,通过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代码
-
html
和body
选择器:设置了页面的高度、字体、颜色和背景样式。 -
.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);
}