Question

我找到了以下CSS脚本来创建彩虹移动背景。

a.logolayout {
    background: linear-gradient(124deg, rgba(255,26,0,0.65), rgba(232,29,29,0.65), rgba(232,183,29,0.65), rgba(227,232,29,0.65), rgba(29,232, 64,0.65), rgba(29,221,232,0.65), rgba(43,29,232,0.65), rgba(221,0,243,0.65), rgba(221,0,243,0.65));
    transition: 0.8s;
    border: 1px; solid none;
    -webkit-animation: rainbow 19s ease infinite;
    -z-animation: rainbow 19s ease infinite;
    -o-animation: rainbow 19s ease infinite;
    animation: rainbow 19s ease infinite;
    background-size: 200% 200%;
}

a.logolayout:hover {
    background: linear-gradient(124deg, rgba(255,26,0,0.85), rgba(232,29,29,0.85), rgba(232,183,29,0.85), rgba(227,232,29,0.85), rgba(29,232, 64,0.85), rgba(29,221,232,0.85), rgba(43,29,232,0.85),      rgba(221,0,243,0.85), rgba(221,0,243,0.85));
    background-size: 200% 200%;
    color: white;
    -webkit-animation: rainbow 9s ease infinite;
    -z-animation: rainbow 9s ease infinite;
    -o-animation: rainbow 9s ease infinite;
    animation: rainbow 9s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

是否有可能只有一个做同样事情的边框？

|---------|
|  text   |
|---------|

文字没有背景，是透明的。只有边界有彩虹效果。这些线是边框，边框宽度类似于5px。

更新

<div id="full-background-pic">
    <a class="only-rainbow-border-moving" > text-see the backgroundpic</a>
</div>

Answer 1

然后呢？

＆＃13;

a.logolayout {
    background: linear-gradient(124deg, rgba(255,26,0,0.65), rgba(232,29,29,0.65), rgba(232,183,29,0.65), rgba(227,232,29,0.65), rgba(29,232, 64,0.65), rgba(29,221,232,0.65), rgba(43,29,232,0.65), rgba(221,0,243,0.65), rgba(221,0,243,0.65));
    transition: 0.8s;
    border: 1px; solid none;
    -webkit-animation: rainbow 9s ease infinite;
    -z-animation: rainbow 9s ease infinite;
    -o-animation: rainbow 9s ease infinite;
    animation: rainbow 9s ease infinite;
    background-size: 200% 200%;
}

a.logolayout:hover {
    background: linear-gradient(124deg, rgba(255,26,0,0.85), rgba(232,29,29,0.85), rgba(232,183,29,0.85), rgba(227,232,29,0.85), rgba(29,232, 64,0.85), rgba(29,221,232,0.85), rgba(43,29,232,0.85),      rgba(221,0,243,0.85), rgba(221,0,243,0.85));
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    -z-animation: rainbow 5s ease infinite;
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 5s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

a.logolayout{
  padding: 5px;
  display: inline-block
}

a.logolayout div{
  padding: 5px;
  color: #fff;
}

.bgimg{
  padding 20px;
  background: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
}

.innerbgimg{
  background: -5px -5px url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
}

＆＃13;

<div class="bgimg">
<a class="logolayout">
<div class="innerbgimg">Test</div>
</a>
</div>

＆＃13;

Answer 2

此处的工作示例：

'posts#index'

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(transparent, rgba(0, 0, 0, .6)), linear-gradient(to bottom right, #fff 50%, transparent 50%, #fff 50%);
  height: 100vh;
  width: 100vw;
}

a {
  text-decoration: none;
  color: #fff;
  text-shadow: 0 8px 16px rgba(0, 0, 0, .3);
}

.rainbow-button {
  -webkit-animation: rainbow 3s ease infinite;
  -z-animation: rainbow 3s ease infinite;
  -o-animation: rainbow 3s ease infinite;
  animation: rainbow 3s ease infinite alternate;
  width: calc(20vw + 6px);
  height: calc(8vw + 6px);
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: bold;
}

.rainbow-button:after {
  content: attr(alt);
  width: 20vw;
  height: 8vw;
  background-color: #DEDEDE;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes rainbow {
  to {
    background-position: 50vw;
  }
}

CSS Gradient 124deg彩虹边框移动

2 个答案: