vue--鼠标经过卡片具有动态阴影效果

样式效果：

代码说明：

设置一整个为ul标签，每一个卡片作为一个li标签，最重要的是进行样式设置。
serviceCodeList 是每个卡片中的信息数据，由后端返回，格式先不贴了，点击事件也不必关注

代码：

<ul class="home-box"><li @click="goToService(service)" class="item home-item" v-for="service in serviceCodeList" :key="service.serviceCode"><div class="img-box"><img :src="service.imgSrc" alt="" /></div><div class="name">{{ service.serviceName }}</div><div class="item-hover">点击进入</div></li></ul>
<style lang="scss">
ul{display: flex;margin: 0 auto;max-width: 1200px;justify-content: center;align-items: flex-start;flex-wrap: wrap;}
.item{width: 200px;height: 219px;padding: 20px;margin: 0 15px 15px;background: $light-color;box-shadow: 0 2px 10px 0 rgba(23, 70, 161, .11);overflow: hidden;border:1px solid rgba(0, 0, 0, 0.12);border-radius: 4px;transition: box-shadow .25s ease,transform .25s ease,-webkit-transform .25s ease;&:hover{transform: translate3d(0,-5px,0);box-shadow: 0 1.5rem 2.5rem rgba(22,28,45,.1),0 .3rem 0.5rem -.50rem rgba(22,28,45,.05) !important;}}
.item-hover{position: absolute;height: 0;bottom: 0;left: 0;right: 0px;overflow: hidden;background: $banner-bg;// color: $light-color;color: #7ff3f2;z-index: 1;transition: all .25s;display: flex;align-items: center;justify-content: center;}&:hover .item-hover{height: 44px;}
</style>

不理解transition，可看transition transform

vue--鼠标经过卡片具有动态阴影效果相关推荐

html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
element vue 获取select 的label_Vue动态组件component的深度使用
背景介绍最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装首先想到的就是Form组件,在Element U ...
vue使用v-for循环，动态修改element-ui的el-switch
在使用element-ui的el-switch中,因为要用v-for循环,一直没有成功,后来仔细查看文档,发现可以这样写 <el-switch v-for="(item, key) i ...
[vue] 你有使用过动态组件吗？说说你对它的理解
[vue] 你有使用过动态组件吗?说说你对它的理解通过 Vue 的元素加一个特殊的 is 特性来实现个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
vue鼠标悬停出现悬浮框（简易版实现）
vue鼠标悬停出现悬浮框(简易版实现) 使用一个变量来控制悬浮框显示和隐藏,注意:这是简易版实现,其他功能需自行开发: 代码如下: <template><div><div ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
基于vue+element实现多级菜单动态生成
使用element的NavMenu组件+vue的组件递归实现动态生成菜单. 首先创建对象记录菜单的标题.链接.子集等信息. menus: [{title: "首页",icon: & ...
怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

vue--鼠标经过卡片具有动态阴影效果

vue--鼠标经过卡片具有动态阴影效果相关推荐

最新文章

热门文章