时间戳

首页 > 解决方案 > 按钮 CSS 过渡/动画悬停问题

css - 按钮 CSS 过渡/动画悬停问题

问题描述

我想创建一个在悬停时更改的按钮。您可以在这里查看：https ://drive.google.com/file/d/1fIcil2Xyky8DC2NRcfZBKXCMHk9gpat2/view?usp=sharing 。

在这里你可以看到我的尝试：https ://codepen.io/koravski/pen/BEvKRP

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  font-family: 'Lato', sans-serif;
}

.txt {
  position: absolute;
  color: #fff;
}

.box {
  width: 200px;
  height: 50px;
  background-color: red;
  transition: all 1s;
}

.box:hover {
  width: 50px;
  height: 5px;
  margin-top: 40px;
}
<div class="txt">Call to action</div>
<div class="box"></div>

问题是当我悬停它时，它开始循环。它应该在红色矩形上，所以它不会循环。

如果您有任何建议，那就太好了。谢谢。

标签： csscss-transitionscss-animations

解决方案

这是一个使用背景动画的想法，您只需要一个元素：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Lato', sans-serif;
}

.txt {
  color: #fff;
  padding:20px 50px;
  background-image:linear-gradient(red,red);
  background-size:100% 100%;
  background-position:bottom center;
  background-repeat:no-repeat;
  transition:1s;
}
.txt:hover {
  background-size:20% 5%;
  color:#000;
}
<div class="txt">Call to action</div>

推荐阅读