成果如图:
能够移入开展。
特色:
1,带有箭头
2,箭头处带有暗影
3,有交互操作
箭头,能够用 border 来实现:
width: 0;
height: 0;
border: 190px solid transparent;
border-left: 60px solid transparent;
援用可用 box-shadow 实现,然而如果是贴合非规定图形的暗影,能够用到滤镜:
filter: drop-shadow(5px 0 5px rgba(0, 0, 0, .2));
交互:以后放大,其余兄弟节点渐入通明
.parent{
.child{opation: 1}
&:hover{
.child{
opation: .2;
&:hover{opation: 1}
}
}
}
代码:vue3
demo.vue
<template>
<div class="step">
<div class="item" v-for="item in list">
<div class="content">
<h2>
<Ellipsis>
{{item.count}}
<small> 项 </small>
</Ellipsis>
</h2>
<h3>
<Ellipsis>
{{item.title}}
</Ellipsis>
</h3>
<Ellipsis class="desc">
{{item.desc}}
</Ellipsis>
</div>
</div>
</div>
</template>
<script setup>
const list = [
{
count: 13,
title: '测试的题目啊',
desc: '测试的内容测试的内容'
},
{
count: 17,
title: '测试的题目啊',
desc: '测试的内容测试的内容'
},
{
count: 12,
title: '测试的题目啊',
desc: '测试的内容测试的内容'
},
{
count: 38,
title: '测试的题目啊',
desc: '测试的内容测试的内容'
},
]
</script>
<style scoped lang="scss">
.step {
display: flex;
align-items: stretch;
overflow: hidden;
position: relative;
.item {
width: 25%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
position: relative;
height: 375px;
color: #fff;
filter: drop-shadow(5px 0 5px rgba(0, 0, 0, .2));
z-index: 0;
transition-duration: .3s;
cursor: default;
.content {
position: absolute;
left: 0;
top: 0;
z-index: 0;
transition-duration: .3s;
height: 100%;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding-left: 20%;
}
&:before {
content: '';
display: block;
position: absolute;
z-index: 0;
width: 0;
height: 0;
right: -249px;
border: 190px solid transparent;
border-left: 60px solid transparent;
pointer-events: none;
}
&:nth-child(1) {
background-color: #7C97CA;
z-index: 3;
&:before {border-left-color: #7C97CA;}
}
&:nth-child(2) {
background-color: #5F7CB2;
z-index: 2;
&:before {border-left-color: #5F7CB2;}
}
&:nth-child(3) {
background-color: #5771A0;
z-index: 1;
&:before {border-left-color: #5771A0;}
}
&:nth-child(4) {
background-color: #294A87;
z-index: 0;
}
h2 {
font-size: 80px;
font-weight: bold;
color: #FFFFFF;
line-height: 117px;
margin: 0;
transition-duration: .3s;
small {
font-size: 28px;
font-weight: 400;
color: #FFFFFF;
line-height: 45px;
transition-duration: .3s;
}
}
h3 {
font-size: 36px;
font-weight: 400;
color: #FFFFFF;
line-height: 56px;
margin: 0;
transition-duration: .3s;
}
.desc {
margin-top: 14px;
font-size: 24px;
font-weight: 300;
color: #FFFFFF;
line-height: 33px;
transition-duration: .3s;
}
}
}
.step {
&:hover {
.item {
.content {opacity: .1;}
&:hover {
width: 40%;
.content {
padding-left: 30%;
opacity: 1;
}
h2 {
font-size: 100px;
small {font-size: 32px;}
}
h3 {font-size: 40px;}
.desc {font-size: 24px;}
}
}
}
}
</style>