|
|
Line 257: |
Line 257: |
| .gradient-border { | | .gradient-border { |
| --borderWidth: 3px; | | --borderWidth: 3px; |
− | background:#1C2B42; | + | background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); |
| position: relative; | | position: relative; |
| border-radius: var(--borderWidth); | | border-radius: var(--borderWidth); |
− | }
| |
− | .gradient-border:after {
| |
− | content: '';
| |
− | position: absolute;
| |
− | top: calc(-1 * var(--borderWidth));
| |
− | left: calc(-1 * var(--borderWidth));
| |
− | height: calc(100% + var(--borderWidth) * 2);
| |
− | width: calc(100% + var(--borderWidth) * 2);
| |
− | background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
| |
− | border-radius: calc(2 * var(--borderWidth));
| |
− | z-index:-1;
| |
− | -webkit-animation: animatedgradient 3s ease alternate infinite;
| |
− | animation: animatedgradient 3s ease alternate infinite;
| |
− | background-size: 300% 300%;
| |
| } | | } |
| | | |
Revision as of 08:41, 15 October 2019
Document
Animated
CSS
Gradient Border