效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="/style.css" /> -->
<title>Document</title>
</head>
<body>
<div class="hero">
<h1>人物介绍</h1>
<div class="review-box">
<div id="slide">
<div class="card">
<div class="profile">
<img src="/image/pic1.jpg" />
<div>
<h3>Phoenix</h3>
<p>Web Designer</p>
</div>
</div>
<p>
The designer sat at their desk, surrounded by sketches and color
swatches. They carefully crafted each line and curve, choosing
just the right hue to bring their vision to life. With a steady
hand and a sharp eye, they transformed blank pages into beautiful
works of art.
</p>
</div>
<div class="card">
<div class="profile">
<img src="image/pic2.jpg" />
<div>
<h3>Steve McCurry</h3>
<p>UI/UX Designer</p>
</div>
</div>
<h3>
The designer sat at their desk, surrounded by sketches and color
swatches. They carefully crafted each line and curve, choosing
just the right hue to bring their vision to life. With a steady
hand and a sharp eye, they transformed blank pages into beautiful
works of art.
</h3>
</div>
<div class="card">
<div class="profile">
<img src="image/pic3.jpg" />
<div>
<h3>Merlin Nauven</h3>
<p>Web Designer</p>
</div>
</div>
<p>
The designer sat at their desk, surrounded by sketches and color
swatches. They carefully crafted each line and curve, choosing
just the right hue to bring their vision to life. With a steady
hand and a sharp eye, they transformed blank pages into beautiful
works of art.
</p>
</div>
<div class="card">
<div class="profile">
<img src="image/pic4.jpg" />
<div>
<h3>John Williams</h3>
<p>Web Designer</p>
</div>
</div>
<p>
The designer sat at their desk, surrounded by sketches and color
swatches. They carefully crafted each line and curve, choosing
just the right hue to bring their vision to life. With a steady
hand and a sharp eye, they transformed blank pages into beautiful
works of art.
</p>
</div>
</div>
<div class="sidebar">
<!-- <img src="/image/up-arrow.png" id="upArrow" /> -->
<div id="upArrow">↑</div>
<div id="downArrow">↓</div>
</div>
<!-- <img src="/image/down-arrow.png" id="downArrow" /> -->
</div>
</div>
</div>
<script>
var slide = document.getElementById('slide')
var upArrow = document.getElementById('upArrow')
var downArrow = document.getElementById('downArrow')
let x = 0
upArrow.onclick = function () {
if (x < 0) {
x = x + 300
slide.style.top = x + 'px'
}
}
downArrow.onclick = function () {
if (x > -900) {
x = x - 300
slide.style.top = x + 'px'
}
}
</script>
</body>
</html>
<style>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background: #f6fbff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 30px;
position: relative;
margin-bottom: 60px;
}
h1::after {
content: '';
width: 150px;
height: 3px;
background: linear-gradient(to right, #0780ed, #9f4db5);
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
.review-box {
width: 90%;
max-width: 700px;
height: 300px;
border-radius: 10px;
box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
}
#upArrow {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#downArrow {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.card {
height: 300px;
padding: 40px;
color: #111;
line-height: 22px;
box-sizing: border-box;
background: #fff;
position: relative;
}
.profile {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.profile img {
width: 70px;
border-radius: 50%;
margin-right: 20px;
}
.profile h3 {
font-size: 26px;
color: #0780ed;
margin-bottom: 8px;
}
#slide {
width: 100%;
padding-right: 60px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.sidebar {
width: 60px;
height: 100%;
padding: 15px 0;
box-sizing: border-box;
background: #0780ed;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.sidebar img {
width: 25px;
padding: 5px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}
</style>
Tips：觉得有用的话点个关注呦，会分享更多“有用”的前端tips