• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Анимация бордюра с помощью градиента

Разработка Анимация бордюра с помощью градиента

Нет прав для скачивания
Анимация бордюра с помощью градиента.
Пишем простой HTML:
HTML:
<div class="wrapper">
    <div class="box">
        <p>Conic gradient</p>
    </div>

    <div class="box">
        <p>Radial gradient</p>
    </div>
</div>
Пишем наше оформление CSS:
CSS:
@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
    box-sizing: border-box;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

body {
    font-family: Raleway, sans-serif;
    text-align: center;
    margin: 0;
    padding: 1rem;
    background-color: rgba(10, 12, 18, 1);
    color: white;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

p {
    margin: 0;
}

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --c1: rgba(168, 239, 255, 1);
    --c2: rgba(168, 239, 255, 0.1);
}

.wrapper {
    min-width: min(40rem, 100%);
}

.box {
    font-size: 3vw;
    margin: max(1rem, 3vw);
    border: 0.35rem solid;
    padding: 3vw;
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
    animation: borderRotate var(--d) linear infinite forwards;
}

.box:nth-child(2) {
    border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
    animation: borderRadial var(--d) linear infinite forwards;
}

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }
    40% {
        --gradX: 100%;
        --gradY: 100%;
    }
    60% {
        --gradX: 50%;
        --gradY: 100%;
    }
    80% {
        --gradX: 0%;
        --gradY: 50%;
    }
    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
}
Смотрим получившийся результат:
dr39.gif
Автор
baltun
Скачиваний
0
Просмотры
21
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Верх Низ