Bạn có thể làm động các đường viền trong css không?

Khi nói đến biên giới, điều đầu tiên bạn nghĩ đến

div {
    border: 1px dashed #333;
}

4 là cái được sử dụng phổ biến nhất là

div {
    border: 1px dashed #333;
}

5,

div {
    border: 1px dashed #333;
}

6xuất hiện trong hình trên

div {
    border: 1px dashed #333;
}

6

Ngoài các kiểu phổ biến nhất là

div {
    border: 1px dashed #333;
}

5,

div {
    border: 1px dashed #333;
}

6, đường viền CSS cũng hỗ trợ các kiểu

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

0,

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

1,

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

2,

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

3,

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

4, ________6__5,

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

6 và

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

7. Xóa

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

0,

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

1để xem tất cả các kiểu đường viền được hỗ trợ nguyên gốc

Đây là những điều cơ bản. Nếu bạn muốn triển khai đường viền của các kiểu khác hoặc thêm hoạt ảnh vào đường viền, bạn cần hợp tác với một số thuộc tính khác hoặc mở rộng tâm trí của bạn. OK, chúng ta hãy xem một số đường viền thú vị khác

Độ dài đường viền thay đổi

Hãy bắt đầu với một cái đơn giản hơn, để đạt được hiệu ứng đường viền như thế này

Đây thực sự là hai phần tử giả mượn các phần tử. Chỉ có đường viền trên và bên trái, đường viền dưới và bên phải của hai phần tử giả được đặt tương ứng,

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

0và chiều cao và chiều rộng của hai phần tử giả có thể thay đổi khi đi qua. Rất dễ hiểu

div {
    position: relative;
    border: 1px solid #03A9F3;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }
    
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
    
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
    
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}

CodePen Demo — hoạt hình đường viền chiều rộng

Tiếp theo sẽ bắt đầu đào sâu độ khó

Hoạt hình đường viền chấm

Sử dụng từ khóa

div {
    border: 1px dashed #333;
}

6 , bạn có thể dễ dàng tạo đường viền nét đứt

div {
    border: 1px dashed #333;
}

Tất nhiên, mục đích của chúng tôi là làm cho biên giới di chuyển. Không có cách nào để sử dụng từ khóa

div {
    border: 1px dashed #333;
}

6. Nhưng có nhiều cách để thực hiện các đường đứt nét trong CSS. Ví dụ, độ dốc là một cách tốt

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

Hãy xem, các đường đứt nét được mô phỏng bằng cách sử dụng các gradient như sau

Chà, gradient hỗ trợ nhiều gradient. Chúng ta có thể sử dụng các gradient để thể hiện cả bốn mặt của thùng chứa

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

Hiệu ứng như sau

OK, cho đến nay, hoạt ảnh đường viền chấm chấm của chúng ta thực sự đã hoàn thành hơn một nửa. Mặc dù hoạt ảnh ____16_______3không được hỗ trợ, nhưng độ dốc được hỗ trợ. Chúng tôi thêm một

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

0hiệu ứng ,

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

0và khi chúng tôi thêm một

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

6hoạt ảnh , chúng tôi

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

7có thể thay đổi phần tử

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

OK, hãy nhìn vào hiệu ứng, khi di chuột lên, đường viền có thể di chuyển, bởi vì toàn bộ hoạt ảnh được kết nối từ đầu đến cuối, hoạt ảnh vòng lặp vô hạn trông giống như đường viền chấm luôn di chuyển, đây là một thủ thuật nhỏ hoặc thủ thuật

Đây là một thủ thuật nhỏ khác, nếu chúng ta muốn hoạt ảnh của đường viền nét đứt chuyển từ các đường viền khác sang đường viền nét đứt, sau đó tạo hiệu ứng động. Cũng có thể mô phỏng hoàn toàn bằng gradient, nếu bạn muốn tiết kiệm một số mã, nó sẽ là

div {
    border: 1px dashed #333;
}

4 chẳng hạn

div {
    border: 1px solid #333;
    
    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

Do sự khác biệt về vị trí của đường viền và nền trên mô hình hộp, sẽ có sự sai lệch hình ảnh rõ ràng

Để khắc phục điều này, chúng ta có thể thay thế

div {
    border: 1px dashed #333;
}

4 bằng

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

0, vì

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

0có thể được thiết lập là

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

2. Nó hoàn toàn có thể giải quyết vấn đề này

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

Cuối cùng, hãy xem hiệu ứng được áp dụng cho nút thực tế

Code hoàn chỉnh của Demo trên như sau

CodePen Demo — hoạt hình đường nét đứt

Các cách sử dụng thú vị khác cho độ dốc

Với độ dốc, có thể đạt được nhiều hơn những hiệu ứng trên

Chúng tôi tiếp tục tìm hiểu sâu về gradient và sử dụng gradient để đạt được nền như vậy

div {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}

Lưu ý rằng đồ họa được tạo bởi phần tử giả của phần tử được sử dụng ở đây, đồng thời chiều rộng và chiều cao của phần tử gốc giống như của phần tử cha

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

3phần tử

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

4

Tiếp theo, thêm vòng quay vào nó

div {
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

Hãy nhìn vào hiệu ứng

Cuối cùng, sử dụng một phần tử giả để che phần giữa và một hình ảnh động có đường viền đẹp mắt sẽ xuất hiện (các phần tử trong mờ sẽ xuất hiện trong hình ảnh động để dễ hiểu về nguyên tắc)

Code hoàn chỉnh của Demo trên như sau. Lần đầu tiên tôi thấy hiệu ứng này ở tác giả này — Jesse B

CodePen Demo — hiệu ứng chuyển màu viền

Thay đổi màu sắc của gradient

Sau khi thành thạo các kỹ năng cơ bản trên, chúng ta có thể thực hiện một số điều chỉnh về màu sắc của gradient, chúng ta sẽ biến 4 màu thành 1 màu

div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(#399953, #399953);
}

Nhận một biểu đồ như thế này

Một lần nữa, hãy để nó quay cùng nhau và hoạt ảnh đường viền đuổi theo một màu xuất hiện

CodePen Demo — hiệu ứng đường viền gradient 2

Wow, nhìn rất đẹp. Tuy nhiên, nếu là đường đơn thì có một khuyết điểm rõ ràng, đó là phần cuối của đường viền là một hình tam giác nhỏ thay vì thẳng đứng, điều này có thể không áp dụng được trong một số trường hợp hoặc PM không thể chấp nhận

Có cách nào để thoát khỏi những hình tam giác nhỏ này không?

Sử dụng thông minh

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

6

Trước khi chúng ta đi xa hơn về

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

5 , hãy nói về độ dốc góc

Ở trên chủ yếu được sử dụng cho gradient tuyến tính

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

8. Chúng ta có thể

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

9thực sự

Hãy thử

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

9làm điều đó một lần, lần này với phong cách tối hơn. Mã lõi như sau

div {
    border: 1px dashed #333;
}

0

Các kết xuất và sơ đồ như sau. Xoay biểu đồ với gradient góc một phần và sử dụng một phần tử giả khác để che phần giữa, sao cho chỉ phần đường bị rò rỉ

CodePen Demo — Xoay viền 3

Sử dụng thông minh

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

5

Lại là bạn cũ

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

5, và những điều thú vị sẽ không bao giờ vắng bóng

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

5Có thể tự tạo hiệu ứng động cho điểm tọa độ, chuyển đổi từ một hình cắt này sang một hình cắt khác

Sử dụng tính năng này, chúng ta có thể khéo léo triển khai hiệu ứng theo sau đường viền như vậy. Mã giả như sau

div {
    border: 1px dashed #333;
}

1

Các kết xuất cùng với sơ đồ

CodePen — hoạt hình đường viền clip-path

Ở đây, vì các phần tử sẽ được cắt bớt nên các phần tử giả có thể được sử dụng làm nền cho việc cắt bớt và hoạt ảnh.

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

5Đường viền bị cắt sẽ không tạo ra các hình tam giác nhỏ. Đồng thời, phương pháp này cũng hỗ trợ làm tròn

div {
    border: 1px solid #333;
    
    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

5góc

Nếu chúng ta sử dụng một phần tử giả khác để thực sự triển khai kiểu nút, chúng ta có thể nhận được hiệu ứng này

CodePen — hoạt hình đường viền clip-path 2

div {
    border: 1px solid #333;
    
    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

6

Thủ thuật sau đây được thực hiện bằng cách sử dụng tràn. Thực hiện một hình ảnh động đường viền như vậy

Tại sao bạn nói nó là

div {
    border: 1px solid #333;
    
    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

7được thực hiện?

Dán sơ đồ

CodePen Demo — Sử dụng tràn và biến đổi để đạt được hiệu ứng di chuột trên dòng

Hai điểm cốt lõi

1. Chúng tôi sử dụng

   div:hover {
       animation: linearGradientMove .3s infinite linear;
   }
   
   @keyframes linearGradientMove {
       100% {
           background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
       }
   }

   4 để ẩn toàn bộ phần tử ban đầu nằm bên ngoài vùng chứa
2. đã sử dụng

   div {
       border: 1px solid #333;
       
       &:hover {
           border: none;
           background: 
               linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
               linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
               linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
               linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
           background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
           background-position: 0 0, 0 100%, 0 0, 100% 0;
       }
   }

   9, điều khiển tâm quay của phần tử

Bạn có thấy rằng trên thực tế, hầu hết các hiệu ứng CSS thú vị đều sử dụng các kỹ thuật tương tự

Nói một cách đơn giản, hình ảnh động mà chúng ta thấy chỉ là một phần nhỏ của hiện tượng ban đầu. Thông qua cắt xén cụ thể, thay đổi độ trong suốt, mặt nạ, v.v. , cuối cùng chúng ta chỉ thấy một phần của hiện tượng ban đầu

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

0

Sử dụng

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

1, chúng tôi cũng có thể đạt được một số hoạt ảnh đường viền thú vị. Về

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

1, có một bài viết giải thích rất hay -- cách dùng đúng của border-image , bài viết này không giải thích quá nhiều về định nghĩa cơ bản

Nếu chúng ta có một biểu đồ như thế này

Bạn có thể

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

3sử dụng

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

4các thuộc tính của và để có mẫu đường viền tương tự

div {
    border: 1px dashed #333;
}

2

Trên cơ sở này, chiều cao và chiều rộng của phần tử có thể được thay đổi theo ý muốn, do đó nó có thể được mở rộng theo bất kỳ kích thước nào của đường viền vùng chứa

CodePen Demo — Demo hình ảnh đường viền

Sau đó, trong bài viết này - Cách tạo hiệu ứng SVG với hình ảnh đường viền, tôi cũng đã giải thích một loại hoạt hình viền bằng cách sử dụng , điều này rất thú vị

Sự khác biệt so với ví dụ trên là chúng ta chỉ cần làm cho mẫu của chúng ta di chuyển, tức là chúng ta cần một hình nền như vậy：

Sau đó, chúng ta cũng có thể nhận được bản đồ đường viền đang di chuyển, mã giống hệt nhau, nhưng đường viền đang di chuyển

CodePen Demo — Dancing Skull Border

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

1&& độ dốc

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

1Ngoài tham chiếu kết cấu

div {
    outline: 1px solid #333;
    outline-offset: -1px;
    
    &:hover {
        outline: none;
    }
}

8, cũng có thể trực tiếp tô màu hoặc chuyển màu

Thuộc tính CSS nào có thể được làm động?

Thuộc tính hình ảnh đường viền có thể hoạt ảnh được không?

Bạn có thể tạo hiệu ứng động bằng CSS không?

Bạn có thể làm động CSS vị trí không?