首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS边框透明动画

CSS边框透明动画
EN

Stack Overflow用户
提问于 2018-06-19 07:26:31
回答 1查看 224关注 0票数 1

我是css新手。下面是我的代码:

.border1{
  border-bottom: 5px solid rgb(255, 0, 0,0.5);
  animation-name: animation;
  animation-duration: 4s;
 }
.border2{
  border-bottom: 5px solid rgb(0, 255, 0,0.5);
  animation-name: animation;
  animation-duration: 4s;
 }

和动画:

@keyframes animation {
  from {border-bottom-color: rgba(0, 255, 0, 0);}
  to {border-bottom-color: rgba(0, 255, 0, 0.5);}
}

此动画仅适用于border2,因为border2是绿色的,而border1是红色的。我不想为代码中的每个边框都写一个动画关键帧。

所以我想做这样的事情:

@keyframes animation {
  from {border-bottom-color: rgba(, , , 0);}
  to {border-bottom-color: rgba(, , , 0.5);}
}

只需更改不透明度并保留默认颜色即可。如果可能的话,请告诉我怎么做。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-19 07:31:47

使用CSS变量:

.border {
  border-bottom: 5px solid rgba(var(--c),0.5);
  animation: animation 4s infinite alternate linear;
  height:20px;
}

.border1{
  --c:255,0,0;

 }
.border2{
  --c:0,255,0;
 }

@keyframes animation {
  from {border-bottom-color: rgba(var(--c), 0);}
  to {border-bottom-color: rgba(var(--c), 0.5);}
}
<div class="border border1"></div>

<div class="border border2"></div>

另一个想法是使用伪元素来模拟边界,然后你可以设置不透明度的动画:

.border {
  position:relative;
  height:20px;
}
.border:before {
  content:"";
  position:absolute;
  bottom:0px;
  left:0;
  right:0;
  height:5px;
  animation: animation 4s infinite alternate linear;
}

.border1:before{
  background:red;

 }
.border2:before{
  background:green;
 }

@keyframes animation {
  from {opacity:0;}
  to {opacity:0.5;}
}
<div class="border border1"></div>

<div class="border border2"></div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50918720

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档