在CSS过渡期间绘制边框颜色 [英] Drawing border colors during a CSS transition

查看：58
本文介绍了在CSS过渡期间绘制边框颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
}
.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
  transition: width 1.25s ease-out 1.25s, height 1.25s ease-out 1.25s;

}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #60daaa;
  border-left-color: #60daaa;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

<section class="buttons">
  <button class="draw">Draw</button>
</section>

我有一支工作笔( https://codepen.io/anon/pen/vdgdxO)更改元素的边框颜色，同时将鼠标悬停(右上左下)并进行一些过渡以使其平滑.

I have a working pen ( https://codepen.io/anon/pen/vdgdxO ) that changes the border color of an element while hovering ( top right bottom left ) with some transition to smoothen it up.

我希望能够在几秒钟后撤消"边框颜色更改.基本上，我想在另一侧更改颜色时更改边框颜色:

I would like to be able to "reverse" the border color change after a few seconds. Basically, I'd like to change border color when the opposite one is changing color :

  • 边框顶部更改颜色
  • 右边界更改颜色
  • 边框底部更改颜色&边框顶部恢复其原始颜色
  • 左边框更改颜色&边框右返回其原始颜色
  • 边框顶部更改颜色&边框底部恢复其原始颜色
  • 右边框更改颜色&左边框返回到其原始颜色 等
  • border-top change color
  • border-right change color
  • border-bottom change color & border-top goes back to its original color
  • border-left change color & border-right goes back to its original color
  • border-top change color & border-bottom goes back to its original color
  • border-right change color & border-left goes back to its original color etc.

现在我只解决了颜色变化，但是我不知道如何反转"颜色.我也希望这种过渡能永远循环下去，但是我对从何处开始一无所知.有什么建议吗?

Right now I only have the color change worked out, but I don't know how to "reverse" it. I'd also like this transition to loop forever, but I'm clueless on where to start. Any suggestions?

推荐答案

我将使用多个linear-gradient和一个 complex 动画(通过动画每个动画的大小/位置)来获得最终结果.如果您掌握了窍门，则可以轻松调整不同的值以获得所需的任何动画.

I would use multiple linear-gradient and a complex animation (by animating size/position of each one) to obtain the final result. If you get the trick you can easily adjust the different values to obtain any animation you want.

.draw {
  padding: 20px 50px;
  outline:none;
  border: none;
  box-shadow: none;
  background-image: 
  linear-gradient(#f45e61, #f45e61), 
  linear-gradient(#f45e61, #f45e61), 
  linear-gradient(#f45e61, #f45e61), 
  linear-gradient(#f45e61, #f45e61), 
  
  linear-gradient(#60daaa, #60daaa), 
  linear-gradient(#60daaa, #60daaa), 
  linear-gradient(#60daaa, #60daaa), 
  linear-gradient(#60daaa, #60daaa);
  
  background-position: 0 0, 0 0, 0 100%, 0 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 0% 3px, 0% 3px, 3px 0%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  background-color:transparent;
  background-repeat:no-repeat;
  transition:0.2s linear;
}

.draw:hover {
  background-position: 0 100%, 0 0, 0 100%, 100% 0, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  animation: animate 1.4s linear infinite 0.2s;
}

@keyframes animate {
  0% {
  background-position: 0 100%, 0 0, 0 100%, 100% 0, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  40% {
  background-position: 0 100%, 100% 0, 100% 100%, 100% 0, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 100%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  60% {
  background-position: 0 100%, 100% 0, 100% 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 0% 3px, 100% 3px,3px 100%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  70% {
  background-position: 0 100%, 100% 0, 0% 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 100%, 0% 3px, 100% 3px,3px 0%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  80% {
  background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 100%, 0% 3px, 0% 3px,3px 0%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;
  }
  100% {
  background-position: 0% 0%, 0 0, 0 100%, 100% 100%, 
                       0 0, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%,  
                   3px 100%, 100% 3px, 100% 3px,3px 100%;  
  }
}

<button class="draw">Draw</button>

结构:我们有8个linear-gradient. 4将仅创建初始边框并且不会移动(它们放置在底层)，而4将用于绘制将在初始边框上方创建动画的线(它们放置在顶层).

The structure: We have 8 linear-gradient. 4 will simply create the initial border and won't move (they are placed at the bottom layer) and 4 will be used to draw the line that will create our animation above the initial border (they are placed at the top layer).

顺序很重要，因为在背景属性中，每个渐变将有8个值.您会注意到3px值，该值将简单地指定每个渐变的宽度或高度(类似于border-width)，并且在动画过程中不会改变.

The order is important as within background properties we will have 8 values each one for each gradient. You will notice the 3px value that will simply specify the width or height of each gradient (similar to the border-width) and it won't change during the animation.

动画:我将调整每个渐变的位置/大小以创建动画.它分为两个部分:一个小过渡和一个大动画.过渡仅用于创建动画的初始状态，这就是过渡所用的持续时间与动画的延迟相同的原因.

The animation: I will adjust position/size of each gradient to create the animation. it's divided into 2 parts: a small transition and a big animation. The transition is simply used to create the initial state of the animation that's why the duration used for the transition is the same as the delay of the animation.

  1. 第一步是从左到右设置顶部边框的动画.为此，应将梯度放置在大小为0% 3px [width height]的(0,0) [top,left]处.然后我只需将尺寸更改为100% 3px，我将获得所需的动画(如前所述的3px不变).

  1. The first step is to animate the top border from left to right. To do this the gradient should be positioned at (0,0) [top,left] with a size of 0% 3px [width height]. Then I simply change the size to 100% 3px and I will get the needed animation (the 3px as described before won't change).

现在要设置第二个边框的动画，我们执行相同的操作.我们需要一个定位在(100%,0) [top,right]且大小为3px 0% [width height]的渐变，并将其设置为3px 100%的动画:

Now to animate the second border we do the same. We need a gradient positioned at (100%,0) [top,right] with a size of 3px 0% [width height] that we animate to 3px 100%:

  1. 现在，由于我们有两个边框，因此需要为第三个边框设置动画并隐藏第一个边框.我不会详细说明第三个边框，因为它与上面的边框相似，所以让我们看一下如何隐藏顶部的边框.第一个直观的想法是将其大小简单地设置回0% 3px，但这只会创建逆向动画，因此我们会有一个从右到左动画，这很糟糕.这里的技巧是调整渐变的位置，使其变为(100%,0) [top,right]而不是(0,0)，因为当渐变为100％大小时，两个位置都是相等的(因此，在对第二个动画进行动画处理时，我们在上一步中执行了此操作).现在，我们可以将大小重新设置为0% 3px，我们将获得一个从左到右动画:
  1. Now since we have two borders we need to animate the third one AND hide the first one. I won't detail the third border as it's similar to the above ones so let's see how to hide the top one. The first intuitive idea is to simply set its size back to 0% 3px but this will simply create the inverse animation and thus we will have a right to left animation which is bad. The trick here is to adjust the position of the gradient to make it (100%,0) [top,right] instead of (0,0) as both positions are equivalent when the gradient is 100% size (so we do this at the previous step when animating the second one). Now, we can put back the size to 0% 3px and we will have a left to right animation:

  1. 我们继续执行相同的逻辑，直到回到初始状态，并通过在animation属性中指定infinite来获得所需的效果.
  1. We continue the same logic until we get back to the initial state and by specifying infinite in the animation property we will have the needed effect.

因此，主要思想是在给定方向上制作一个大小等于0％的渐变，然后将其设置为全尺寸(100％)的动画，然后更改其位置(这不会对全尺寸产生任何影响)然后将其大小重新设置为0动画.我们将其与4个渐变混合在一起.

So the main Idea is to have a gradient with the size equal to 0% that we animate to full size (100%) in a given direction then we change its position (this won't have any effect on full size) and then animate back its size to 0. We mix this with the 4 gradients we have.

为了避免与所有这些渐变混淆，这里进行了更新，其中我使用了一个伪元素作为静态边框，因此我们只为动画保留4个渐变:

To avoid the confusing with all these gradient here is an update where I used a pseudo element for the static border thus we keep only 4 gradients for the animation:

.draw {
  position:relative;
  padding: 20px 50px;
  outline:none;
  border: none;
  box-shadow: none;
  background-image: 
  linear-gradient(#f45e61, #f45e61), 
  linear-gradient(#f45e61, #f45e61), 
  linear-gradient(#f45e61, #f45e61), 
  linear-gradient(#f45e61, #f45e61);
  
  background-position: 0 0, 0 0, 0 100%, 0 100%;
  background-size: 3px 0%, 0% 3px, 0% 3px, 3px 0%;
  background-color:transparent;
  background-repeat:no-repeat;
  transition:0.2s linear;
}
.draw:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  left:0;
  bottom:0;
  border:3px solid #60daaa;
}

.draw:hover {
  background-position: 0 100%, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%;
  animation: animate 1.4s linear infinite 0.2s;
}

@keyframes animate {
  0% {
  background-position: 0 100%, 0 0, 0 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%;
  }
  40% {
  background-position: 0 100%, 100% 0, 100% 100%, 100% 0;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 100%;
  }
  60% {
  background-position: 0 100%, 100% 0, 100% 100%, 100% 100%;
  background-size: 3px 0%, 0% 3px, 100% 3px,3px 100%
  }
  70% {
  background-position: 0 100%, 100% 0, 0% 100%, 100% 100%;
  background-size: 3px 100%, 0% 3px, 100% 3px,3px 0%;
  }
  80% {
  background-position: 0% 0%, 0% 0, 0% 100%, 100% 100%;
  background-size: 3px 100%, 0% 3px, 0% 3px,3px 0%;
  }
  100% {
  background-position: 0% 0%, 0 0, 0 100%, 100% 100%;
  background-size: 3px 0%, 100% 3px, 0% 3px,3px 0%  
  }
}

<button class="draw">Draw</button>

这篇关于在CSS过渡期间绘制边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆