• css 流动边框

    一、背景流动边框

    在这里插入图片描述
    实现原理：
    用背景进行旋转，超出我们想显示的范围则hidden，就有以上的效果，可以用after或者before元素来实现也可以。
    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 100px auto;
            overflow: hidden;
            border-radius: 4px;
        }
        @keyframes rotate {
            to {
                transform: rotate(1turn);
            }
        }
        .under {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid yellow;
            border-right: 200px solid green;
            border-bottom: 200px solid red;
            border-left: 200px solid blueviolet;
            left: -125px;
            top: -125px;
            animation: rotate 2s linear infinite;
        }
        .box > span {
            position: absolute;
            top: 0px;
            margin: 8px;
            width: 134px;
            height: 134px;
            border-radius: 4px;
            background-size: cover;
            background-image: url(https://img-blog.csdnimg.cn/20201011132854978.jpg);
            background-color: white;
        }
        @keyframes rotate2 {
            0%{
                transform: rotate(0turn);
            }
            to {
                transform: rotate(-1turn);
            }
        }
        .box .under2 {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid rgb(0, 255, 13);
            border-right: 200px solid rgb(45, 218, 203);
            border-bottom: 200px solid rgb(255, 106, 156);
            border-left: 200px solid rgb(251, 255, 26);
            left: -125px;
            top: -125px;
            animation: rotate2 2s linear infinite;
        }
    style>
head>

<body>
    <div class="box">
        <div class="under">div>
        <span>span>
    div>
    <div class="box">
        <div class="under2">div>
        <span>span>
    div>
body>

html>

    二、跟随鼠标流动边框效果

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
        :root {
            --bg: hsl(246 44% 7%);
            --border: hsl(280 10% 50% / 1);
            --card: hsl(237 36% 10%);
            --color: hsl(240 18% 80%);
            --border-width: 2px;
            --border-radius: 12px;
            --gradient: conic-gradient(from 180deg at 50% 70%, hsla(0, 0%, 98%, 1) 0deg, #eec32d 72.0000010728836deg, #ec4b4b 144.0000021457672deg, #709ab9 216.00000858306885deg, #4dffbf 288.0000042915344deg, hsla(0, 0%, 98%, 1) 1turn);
        }

        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

        @property --start {
            syntax: '';
            inherits: true;
            initial-value: 0;
        }

        body {
            background: var(--bg);
            display: grid;
            place-items: center;
            min-height: 100vh;
            font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
            font-weight: 70;
            color: var(--color);
        }

        .container {
            --spread: 60;
            display: flex;
            flex-wrap: wrap;
            flex-direction: var(--direction);
            gap: calc(var(--gap) * 1px);
            margin: 0 auto;
            justify-content: center;
            place-items: center;
            position: relative;
            padding: 2rem;
            touch-action: none;
        }

        article {
            --active: 0.15;
            --start: 0;
            height: 100%;
            background: var(--card);
            padding: 4rem;
            aspect-ratio: 330 / 400;
            border-radius: var(--border-radius);
            min-width: 280px;
            max-width: 280px;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            position: relative;
        }

        article:is(:hover, :focus-visible) {
            z-index: 2;
        }

        .glows {
            pointer-events: none;
            position: absolute;
            inset: 0;
            filter: blur(calc(var(--blur) * 1px));
        }

        .glows::after,
        .glows::before {
            --alpha: 0;
            content: "";
            background: var(--gradient);
            background-attachment: fixed;
            position: absolute;
            inset: -5px;
            border: 10px solid transparent;
            border-radius: var(--border-radius);
            mask:
                linear-gradient(#0000, #0000),
                conic-gradient(from calc((var(--start) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg));
            mask-composite: intersect;
            mask-clip: padding-box, border-box;
            opacity: var(--active);
            transition: opacity 1s;
        }


        article::before {
            position: absolute;
            inset: 0;
            border: var(--border-width) solid transparent;
            content: "";
            border-radius: var(--border-radius);
            pointer-events: none;
            background: var(--border);
            background-attachment: fixed;
            border-radius: var(--border-radius);
            mask:
                linear-gradient(#0000, #0000),
                conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
                    hsl(0 0% 100% / 0.15) 0deg,
                    white,
                    hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg));
            mask-clip: padding-box, border-box;
            mask-composite: intersect;
            opacity: var(--active);
            transition: opacity 1s;
        }

        article::after {
            --bg-size: 100%;
            content: "";
            pointer-events: none;
            position: absolute;
            background: var(--gradient);
            background-attachment: fixed;
            border-radius: var(--border-radius);
            opacity: var(--active, 0);
            transition: opacity 1s;
            --alpha: 0;
            inset: 0;
            border: var(--border-width) solid transparent;
            mask:
                linear-gradient(#0000, #0000),
                conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
            filter: brightness(1.5);
            mask-clip: padding-box, border-box;
            mask-composite: intersect;
        }

        .badge {
            border: 2px solid var(--border);
            align-self: start;
            border-radius: 100px;
            padding: 0.5rem 0.7rem;
            font-size: 0.675rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-weight: 50;
        }

        a {
            color: var(--color);
            text-decoration: none;
            opacity: 0.5;
            display: inline-block;
            align-self: start;
            transition: opacity 0.2s;
        }

        a:is(:hover, :focus-visible) {
            opacity: 1;
        }

        article h2 {
            margin: 0;
            padding: 1rem 0;
            font-weight: 100;
            font-size: 1.5rem;
        }

        .header {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
        }

        .header svg {
            --count: 4;
            width: 106px;
        }

        .header svg:nth-of-type(2),
        .header svg:nth-of-type(3),
        .header svg:nth-of-type(4) {
            position: absolute;
            z-index: calc(var(--count) - var(--index));
            translate: calc(var(--index) * 30%) 0;
            opacity: calc(var(--count) / (2 * (var(--index) * 10)));
        }

        .header svg:nth-of-type(2) {
            --index: 1;
        }

        .header svg:nth-of-type(3) {
            --index: 2;
        }

        .header svg:nth-of-type(4) {
            --index: 3;
        }

        .badge svg {
            width: 16px;
        }

        .dg.ac {
            z-index: 99999 !important;
        }
    style>
head>

<body>
    <div class="container" style="--gap:32;--blur:20;--spread:80;--direction:'column'">
        <article>
            <div class="glows">div>

        article>
        <article >
            <div class="glows" >div>

        article>
    div>

    <script>
        const CONTAINER = document.querySelector('.container')
        const CARDS = document.querySelectorAll('article')

        const CONFIG = {
            proximity: 40,
            spread: 80,
            blur: 20,
            gap: 32,
            vertical: false,
            opacity: 0,
        }

        const PROXIMITY = 10

        const UPDATE = (event) => {
            // get the angle based on the center point of the card and pointer position
            for (const CARD of CARDS) {
                // Check the card against the proximity and then start updating
                const CARD_BOUNDS = CARD.getBoundingClientRect()
                // Get distance between pointer and outerbounds of card
                if (
                    event?.x > CARD_BOUNDS.left - CONFIG.proximity &&
                    event?.x < CARD_BOUNDS.left + CARD_BOUNDS.width + CONFIG.proximity &&
                    event?.y > CARD_BOUNDS.top - CONFIG.proximity &&
                    event?.y < CARD_BOUNDS.top + CARD_BOUNDS.height + CONFIG.proximity) {
                    // If within proximity set the active opacity
                    CARD.style.setProperty('--active', 1)
                } else {
                    CARD.style.setProperty('--active', CONFIG.opacity)
                }
                const CARD_CENTER = [
                    CARD_BOUNDS.left + CARD_BOUNDS.width * 0.5,
                    CARD_BOUNDS.top + CARD_BOUNDS.height * 0.5
                ]
                let ANGLE = Math.atan2(event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0]) * 180 / Math.PI
                ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE;
                CARD.style.setProperty('--start', ANGLE + 90)
            }

        }

        document.body.addEventListener('pointermove', UPDATE)

        const RESTYLE = () => {
            CONTAINER.style.setProperty('--gap', CONFIG.gap)
            CONTAINER.style.setProperty('--blur', CONFIG.blur)
            CONTAINER.style.setProperty('--spread', CONFIG.spread)
            CONTAINER.style.setProperty('--direction', CONFIG.vertical ? 'column' : 'row')
        }



        RESTYLE()
        UPDATE()
    script>
body>

html>

    三、利用clip-path实现流动边框效果

    四边：
    在这里插入图片描述
    两边：
    请添加图片描述

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        body {
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .box {
            height: 150px;
            width: 150px;
            position: relative;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(45deg, gold, deeppink);
            /* animation: hue 3s infinite linear; */

            /* &::before,
            &::after {
                content: "";
                position: absolute;
                top: -15px;
                bottom: -15px;
                left: -15px;
                right: -15px;
                border: 5px solid #24acf2;
                border-image: linear-gradient(45deg, gold, deeppink) 1;
                clip-path: inset(0px round 10px);
                animation: clippath 3s infinite linear;
            }

            &::after {
                animation: clippath 3s infinite -1.5s linear;
            }

            span {
                color: white;
                font-size: 20px;
            } */
        }

        .line {
            position: absolute;
            top: -15px;
            bottom: -15px;
            left: -15px;
            right: -15px;
            border: 5px solid #24acf2;
            border-image: linear-gradient(45deg, gold, blue, deeppink) 1;
            /* clip-path: inset(0px round 10px); */
            animation: clippath 8s infinite linear;
            filter: blur(50px);
            animation-delay: -0s;
            box-shadow: 0 0 3px inset rgba(247, 214, 1,0.3);
        }

        .line-2 {
            animation-delay: -2s;
            animation: clippath2 8s infinite -2s linear;
            
        }

        .line-3 {
            animation-delay: -4s;
        }

        .line-4 {
            animation-delay: -6s;
            animation: clippath2 8s infinite -6s linear;

        }
        /* .line-2,.line-4{
            top: -20px;
            bottom: -20px;
            left: -20px;
            right: -20px;
        } */

        @keyframes hue {
            0% {
                filter: hue-rotate(0deg);
            }

            100% {
                filter: hue-rotate(360deg);
            }
        }

        @keyframes clippath {
            0% {
                clip-path: inset(0 0 95% 0);
                filter: hue-rotate(0deg) blur(5px);
            }

            25% {
                clip-path: inset(0 95% 0 0);
            }

            50% {
                clip-path: inset(95% 0 0 0);
            }

            75% {
                clip-path: inset(0 0 0 95%);
            }

            100% {
                clip-path: inset(0 0 95% 0);
                filter: hue-rotate(360deg) blur(5px);
            }
        }

        @keyframes clippath2 {
            0% {
                clip-path: inset(0 0 95% 0);
                filter: hue-rotate(0deg) blur(10px);
            }

            25% {
                clip-path: inset(0 95% 0 0);
            }

            50% {
                clip-path: inset(95% 0 0 0);
            }

            75% {
                clip-path: inset(0 0 0 95%);
            }

            100% {
                clip-path: inset(0 0 95% 0);
                filter: hue-rotate(360deg) blur(10px);
            }
        }
    style>
head>

<body>
    <div class="box">

        <div class="line-1 line">div>
        
        <div class="line-3 line">div>
        
        <span>hello worldspan>
    div>
body>

html>

    四、
    请添加图片描述

    

@property --border-angle-1 {
	syntax: "";
	inherits: true;
	initial-value: 0deg;
}

@property --border-angle-2 {
	syntax: "";
	inherits: true;
	initial-value: 90deg;
}

@property --border-angle-3 {
	syntax: "";
	inherits: true;
	initial-value: 180deg;
}


/* sRGB color. */
:root {
	--bright-blue: rgb(0, 100, 255);
	--bright-green: rgb(0, 255, 0);
	--bright-red: rgb(255, 0, 0);
	--background: black;
	--foreground: white;
	--border-size: 2px;
	--border-radius: 0.75em;
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
	:root {
		--bright-blue: color(display-p3 0 0.2 1);
		--bright-green: color(display-p3 0.4 1 0);
		--bright-red: color(display-p3 1 0 0);
	}
}

@keyframes rotateBackground {
	to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
	to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
	to { --border-angle-3: 540deg; }
}

body {
	background: var(--background);
	color: var(--foreground);
	min-height: 100dvh;
	display: grid;
	place-content: center;
	margin: 0;
	font-family: "Aspekta";
}

button {
	--border-angle-1: 0deg;
	--border-angle-2: 90deg;
	--border-angle-3: 180deg;
	color: inherit;
	font-size: calc(0.8rem + 4vmin);
	font-family: inherit;
	border: 0;
	padding: var(--border-size);
	display: flex;
	width: max-content;
	border-radius: var(--border-radius);
	background-color: transparent;
	background-image: conic-gradient(
			from var(--border-angle-1) at 10% 15%,
			transparent,
			var(--bright-blue) 10%,
			transparent 30%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-2) at 70% 60%,
			transparent,
			var(--bright-green) 10%,
			transparent 60%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-3) at 50% 20%,
			transparent,
			var(--bright-red) 10%,
			transparent 50%,
			transparent
		);
	animation: 
		rotateBackground 3s linear infinite,
		rotateBackground2 8s linear infinite,
		rotateBackground3 13s linear infinite;
}

/* Change this background to transparent to see how the gradient works */
button div {
	background: var(--background); 
	padding: 1em 1.5em;
	border-radius: calc(var(--border-radius) - var(--border-size));
	color: var(--foreground);
}
  • 相关阅读:
    CAPL函数Test Node中，关闭总线，关闭节点，停发报文应该怎么做？
    Ubuntu20.04 配置 yolov5_ros 功能包记录
    MATLAB打开历史命令窗口并保持
    一文详解企业数据分类分级的推进路径
    加拿大FBA海运详细说明
    Java中整数基础知识
    SpringMVC
    从 Google 离职，前Go 语言负责人跳槽小公司
    Windows AD域报表
    python 接口自动化测试
  • 原文地址：https://blog.csdn.net/Pure_White520/article/details/140041492