|
|
| Line 245: |
Line 245: |
| | text-align: center; | | text-align: center; |
| | } | | } |
| − | #box {
| |
| − | display: flex;
| |
| − | align-items: center;
| |
| − | justify-content: center;
| |
| − | width: 400px;
| |
| − | height: 200px;
| |
| − | color: white;
| |
| − | font-family: 'Raleway';
| |
| − | font-size: 2.5rem;
| |
| − | }
| |
| − | .gradient-border {
| |
| − | --borderWidth: 3px;
| |
| − | background: #1D1F20;
| |
| − | position: relative;
| |
| − | border-radius: var(--borderWidth);
| |
| − | }
| |
| − | .gradient-border {
| |
| − | --borderWidth: 3px;
| |
| − | background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
| |
| − | position: relative;
| |
| − | border-radius: var(--borderWidth);
| |
| − | -webkit-animation: animatedgradient 3s ease alternate infinite;
| |
| − | animation: animatedgradient 3s ease alternate infinite;
| |
| − | background-size: 300% 300%;
| |
| − | width: 410px;
| |
| − | height: 210px;
| |
| − | z-index:-1;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @-webkit-keyframes animatedgradient {
| |
| − | 0% {
| |
| − | background-position: 0% 50%;
| |
| − | }
| |
| − | 50% {
| |
| − | background-position: 100% 50%;
| |
| − | }
| |
| − | 100% {
| |
| − | background-position: 0% 50%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @keyframes animatedgradient {
| |
| − | 0% {
| |
| − | background-position: 0% 50%;
| |
| − | }
| |
| − | 50% {
| |
| − | background-position: 100% 50%;
| |
| − | }
| |
| − | 100% {
| |
| − | background-position: 0% 50%;
| |
| − | }
| |
| − | }
| |
| | | | |
| | </style> | | </style> |
| Line 400: |
Line 346: |
| | | | |
| | <div id="almost" style="border: 5px solid #1C2B42;"> | | <div id="almost" style="border: 5px solid #1C2B42;"> |
| − | <!-- partial:index.partial.html -->
| |
| − | <div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>
| |
| | <table class="timeline" style="border: 0px !important;"> | | <table class="timeline" style="border: 0px !important;"> |
| | | | |
