这是使用 Vue 制作大气的手风琴人物介绍页面，默认激活第一个，显示人物的名称、简介和图片，其他未激活的以黑色半透明的形式显示人物图片的一小部分。主要使用 Vue 和 CSS3 过度属性实现，同时兼容移动端。
大气的手风琴人物介绍
查看效果：Vue制作大气的手风琴人物介绍演示
制作过程
1、HTML
该效果看起来挺大的，但代码却不多，html 部分的代码为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>Vue制作大气的手风琴人物介绍_dowebok</title>
<link rel="stylesheet" href="reseter.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Vue制作大气的手风琴人物介绍</h1>
<div id="app">
<ul>
<li
v-for="(artist, i) in artists"
:style="`background-image: url(${artist.backgroundUrl});`"
role="button"
:class="active === i ? 'active' : ''"
@click="() => (active = i)"
>
<h3>{{ artist.name }}</h3>
<div class="section-content">
<div class="inner">
<div class="bio">
<h2>{{ artist.name }}</h2>
<p> {{ artist.description }} </p>
<div>
<a
:href="artist.url"
target="_blank"
class="artist-profile-link md:hidden"
>了解更多</a
>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script src="vue.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2、CSS
CSS 的代码稍微多一些，它负责整个手风琴的主要效果。
ul {
display: flex;
height: 600px;
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
width: 100%;
min-width: 100%;
flex-direction: column;
}
li {
flex: 1;
display: flex;
align-items: stretch;
cursor: pointer;
transition: all 0.35s ease;
cursor: pointer;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
overflow: hidden;
}
li:before {
content: '';
position: absolute;
z-index: 20;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 15, 15, 0.75);
}
li.active {
flex: 6;
cursor: default;
}
li.active:before {
background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%);
}
h2 {
font-size: 36px;
line-height: 36px;
font-weight: 700;
text-transform: uppercase;
}
h3 {
font-weight: bold;
white-space: nowrap;
position: absolute;
z-index: 30;
opacity: 1;
top: 50%;
left: 50%;
transition: top 0.35s, opacity 0.15s;
transform-origin: 0 0;
font-size: 24px;
text-transform: uppercase;
transform: translate(-50%, -50%) rotate(0deg);
}
.active h3 {
opacity: 0;
top: 200%;
}
.section-content {
position: relative;
z-index: 30;
opacity: 0;
align-self: flex-end;
width: 100%;
transition: all 0.35s 0.1s ease-out;
}
.active .section-content {
opacity: 1;
}
.section-content .inner {
position: absolute;
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr;
grid-column-gap: 20px;
align-items: flex-end;
left: 0;
bottom: 0;
padding: 20px;
opacity: 0;
transition: opacity 0.25s ease-out;
}
.active .section-content .inner {
opacity: 1;
}
.artist-profile-link {
width: 4em;
padding: 10px 15px;
border: 1px solid #fff;
border-radius: 6px;
color: #fff;
text-decoration: none;
pointer-events: none;
}
.active .artist-profile-link {
pointer-events: all;
}
3、Javascript
JS 部分也没有多少代码，主要是数据内容。
const dowebok = {
data() {
return {
active: 0,
artists: [
{
name: '玉城之子·暃',
description: '传说中，广袤的云中漠地在历史上曾有过许多个形色各异的城邦...',
url: 'https://www.dowebok.com/8626.html',
backgroundUrl:
'542-bigskin-1.jpg'
},
{
name: '渡世行者·金蝉',
description: '上古，金蝉曾为神职一员。他天性慈悲善良，珍视一草一木...',
url: 'https://www.dowebok.com/8626.html',
backgroundUrl:
'540-bigskin-1.jpg'
},
...
]
}
}
}
Vue.createApp(dowebok).mount('#app')
到这里就制作完了，如需下载代码，请点击：Vue制作大气的手风琴人物介绍
网友评论