我试图在一个div上创建一个动画效果,其中边框和阴影使div在悬停时看起来像3d,然后当光标离开时慢慢褪色/消失。
正如你所看到的,第一个例子(我的代码)没有边框消失过渡,而第二个例子(我想要的)有。这是一个轻微的动画,但它的存在。
如何复制边框消失动画?
到目前为止,我已经得到了动画播放时,悬停,但我不知道我会如何去动画边界消失,我假设我需要使用onmouseleave和一些过渡。
在blog-post:hover上播放的border-width上的CSS过渡
但是我不知道如何在鼠标离开上得到一个如图所示的过渡。
.blog-post {
border-radius: 25px;
height: fit-content;
transition-property: border-width;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
display: block;
}
.blog-post:hover {
border-radius: 25px;
border-image: none;
border-style: none none solid solid;
border-width: medium medium 8px 6px;
border-color: #1D89E7;
filter: drop-shadow(0px 2px 2px #000);
background: #f0f6fb;
}
.blog-img {
padding: 30px;
border-radius: 25px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="bg-white blog-post shadow-lg rounded-lg max-w-sm mb-5">
<a href="#">
<img class="img-responsive blog-img" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div class="pl-5 pr-5 pb-3 mt-2">
<a href="#">
<h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="text-muted blog-date-text">June 6, 2023</p>
</div>
</div>
1条答案
按热度按时间bnl4lu3b1#
我认为box-shadow与翻译结合: