html - 如何在悬停时将动画添加到引导 4 卡?
问题描述
我有一张卡片,我想对其应用一些基本动画,例如 - 放大效果和悬停时边框颜色的变化。我尝试了几种方法,但没有任何方法对我有用。之前已经问过很多类似的问题,我尝试了一些但没有得到满意的结果。
下面是我的代码 -
HTML
<div class="container">
<a class=" text-decoration-none " href="">
<div class="card">
<img class="icon" src=""/>
<div class="card-text">
AlphaBetaGamma
</div>
<div class="d-flex align-items-center justify-content-end">
<span class="read-more">READ MORE</span>
<i class="fas fa-arrow-circle-right"></i>
</div>
</div>
</a>
</div>
CSS-
.card .read-more:hover{
font-size: 14px;
}
.card :hover{
box-shadow: 8px 8px 8px blue;
}
由于某种原因,盒子阴影部分无法正常工作。我还希望卡片放大时卡片上的文字会增加一点,并且应该添加蓝色阴影。
我怎样才能做到这一点?
解决方案
要获得平滑的过渡效果,请将“过渡”添加到您要定位的元素。然后在悬停选择器中,更改尺寸,它应该会发生更平滑的过渡。
与颜色变化等相同。这只是其中一种方式。
.card .read-more:hover{
font-size: 14px;
}
.card:hover{
box-shadow: 8px 8px 8px blue;
transform:scale(1.2);
}
.card{
height:200px;
width:200px;
border:1px solid black;
transition:.3s;
margin: 3rem;
}
<div class="container">
<a class=" text-decoration-none " href="">
<div class="card m-5">
<img class="icon" src=""/>
<div class="card-text">
AlphaBetaGamma
</div>
<div class="d-flex align-items-center justify-content-end">
<span class="read-more">READ MORE</span>
<i class="fas fa-arrow-circle-right"></i>
</div>
</div>
</a>
</div>
推荐阅读
- jenkins - 如何让 Jenkins Jobs 登录 Spinnaker UI
- jquery - 如何使用窗口打印功能打印条码标签?
- sql - 如何在mongodb中匹配相等的值
- r - 计算值 <0 的最小值?
- angular - 订阅父组件上的 ActionsSubject 不起作用
- powershell - 通过 Powershell 查找正在使用的防火墙
- sql - SQL Developer 中的“复制到 Oracle”过程
- xslt - 转换为 PDF/RTF 时不支持 padding-left 属性
- node.js - AWS Lambda 函数永远不会触发套接字流 (nodejs) 的 on 'data' 函数
- mongodb - mongoS容器内的mongo连接错误