时间戳

首页 > 解决方案 > 如何使用 CSS 动画匹配悬停按钮效果？

css - 如何使用 CSS 动画匹配悬停按钮效果？

问题描述

我试图将按钮悬停效果复制到预加载器中。

悬停按钮时，蓝色从左到右移动，然后当您离开时，白色从左侧进入并在右侧完成。

理想情况下，这就是我要复制的内容，请参阅下面的 codepen 链接：

按钮密码笔

/* HTML */
<a href="#" class="btnslide"><span class="text">View Our Projects</span></a>

/* CSS */
    .btnslide {
font-family:'futura-pt';
font-size:14px;
background-color:#fff;
color:#2A4173;
border:2px solid #2A4173;
display:inline-block;
padding:10px 45px;
text-decoration:none;
text-align:center;
position:relative;
margin-bottom:1em;
outline:none;
-webkit-appearance:none;
border-radius:0
}    

.btnslide img {
max-height:10px;
margin-left:5px
}    

.btnslide img.white {
display:none
}    

.btnslide:hover img.blue {
display:none
}    

.btnslide:hover img.white {
display:inline-block
}    

.btnslide:before {
background-color:#2A4173;
content:"";
color:#fff!important;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transform:scaleX(0);
-ms-transform:scaleX(0);
transform:scaleX(0);
-webkit-transform-origin:right;
-ms-transform-origin:right;
transform-origin:right;
-webkit-transition:-webkit-transform .4s cubic-bezier(.19,1,.22,1);
transition:-webkit-transform .4s cubic-bezier(.19,1,.22,1);
-o-transition:transform .4s cubic-bezier(.19,1,.22,1);
transition:transform .4s cubic-bezier(.19,1,.22,1);
transition:transform .4s cubic-bezier(.19,1,.22,1),-webkit-transform .4s cubic-bezier(.19,1,.22,1);
will-change:transform
}    

.btnslide:hover:before {
-webkit-transform:scaleX(1);
-ms-transform:scaleX(1);
transform:scaleX(1);
-webkit-transform-origin:left;
-ms-transform-origin:left;
transform-origin:left
}    

.btnslide:hover span.text {
color:#fff
}    

.btnslide span.text {
-webkit-transition:color .4s cubic-bezier(.19,1,.22,1);
-o-transition:color .4s cubic-bezier(.19,1,.22,1);
transition:color .4s cubic-bezier(.19,1,.22,1);
position:relative;
z-index:2
}    

.btnslide span.text span.plus {
font-size:25px;
line-height:0;
position:relative;
top:3px
}

我几乎让它工作了蓝色进来然后白色进来但是它显示白色从右边进来一点，我正试图阻止。

预加载器 Codepen

 /* HTML */
 <a href="#" class="btnslide"><span class="text">View Our Projects</span></a>

/* CSS */
* {
  margin: 0;
  padding: 0;
}    

.btnslide {
  width: 100%;
  font-size: 14px;
  background-color: #fff;
  color: #2A4173;
  display: inline-block;
  text-align: center;
  position: fixed;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
  top: 0;
  left: 0;
  height: 100vh;
}
.btnslide span.text {
  -webkit-transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.btnslide span.text img {
  max-height: 150px;
}
.btnslide:before {
  background-color: #2A4173;
  content: "";
  color: #fff !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-transition: -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
  -webkit-animation: fontbulger 5s infinite;
  /* Safari 4+ */
  -moz-animation: fontbulger 5s infinite;
  /* Fx 5+ */
  -o-animation: fontbulger 5s infinite;
  /* Opera 12+ */
  animation: fontbulger 5s infinite;
}
@keyframes fontbulger {
  0% {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  30% {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  60% {
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    top: 0;
    right: 0;
    left: unset;
  }
  100% {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    top: 0;
    right: 0;
    left: unset;
  }
}
.btnslide:hover:before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}

我不确定是否有更简单的方法来实现这一点，但我非常感谢任何人提供的任何帮助。

再次感谢

标签： css

解决方案

推荐阅读