直接上效果图:
用到的CSS知识点
- transition css过渡
- transform 转换
- linear-gradient 线性渐变
当进入父元素之后触发子元素的hover,可以这样写:
父类:hover 子类{} .all:hover .imag{}
vue的template如下:
看嵌套关系就好了
<template>
<div>
<div class="title text-left">{{basic.title}}</div>
<div class=" d-flex flex-row ">
<div v-for="(item,index) in content">
<div class="all" @click="Jump(content[index].url)" :style="{width:items.width,height:items.height,'border-radius':basic.radius}">
<div class="imag" :style="{width:items.width,height:items.height,'background-image': 'url('+item.pic+')',}">
</div>
<div class="btngo">{{basic.btn}}</div>
<div class="content">
<div class="d-flex flex-row justify-content-between">
<div class="">{{item.author}}</div>
<div class="">播放{{item.cout}}</div>
</div>
<div class="text-left introduce">{{item.introduce}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
/* 标题 */
.title {
margin: 0;
font-size: 24px;
color: #000;
line-height: 33px;
font-weight: 400;
}
/* 主体 */
.all {
position: relative;
overflow: hidden;
margin: 18px 10px 10px 10px;
cursor: pointer
}
/* 设置底图样式 */
.imag {
background-repeat: no-repeat;
background-size: cover;
transition: transform .8s;
}
/* 鼠标进入该区域 图片放大1.2倍 */
.all:hover .imag {
transform: scale(1.2);
}
/* 个人信息的渐变背景 */
.content {
width: 100%;
height: 64px;
z-index: 2;
color: #fff;
padding: 9px 10px;
font-size: 14px;
position: absolute;
left: 0%;
top: 82%;
transition: transform .8s;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
/* 鼠标进入该区域 向上移25px */
.all:hover .content {
transform: translateY(-25px);
}
/* 个人描述 */
.introduce {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 6px;
}
/* 按钮样式 */
.btngo {
position: absolute;
left: 60%;
top: 5%;
height: 24px;
width: 68px;
padding: 0 10px;
line-height: 24px;
color: #fff;
background-color: #ff5e90;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
}
如果有什么问题或者bug可以提出来哦!!!!
1、关于transition的属性值,可以参考这篇文章:
https://blog.csdn.net/actorwen/article/details/78799415
2、关于transform,可以参考这篇文章:
https://www.jianshu.com/p/80f6051389bd
3、关于渐变效果的可以参考这篇文章
https://www.cnblogs.com/dodocie/p/7132459.html