Hoạt hình css đường viền nút

Question

Khi nói đến đường viền, điều đầu tiên bạn nghĩ đến đường viền là đường viền được sử dụng phổ biến nhất là nét liền, nét đứt xuất hiện trong hình nét đứt ở trên

Nội dung chính Show

Độ dài đường viền thay đổi
Hoạt hình đường viền chấm
Các cách sử dụng tuyệt vời khác cho độ dốc
Thay đổi màu của chuyển màu
Sử dụng thông minh Conic-gradient
Sử dụng thông minh clip-path
Sử dụng tràn thông minh
Sử dụng thông minh hình ảnh đường viền
hình ảnh đường viền && Gradients
Bạn có thể tạo hiệu ứng đường viền trong CSS không?
Thuộc tính Hình ảnh Đường viền có thể Hoạt ảnh được không?

Ngoài đường viền CSS liền, nét đứt, phổ biến nhất còn hỗ trợ các kiểu không, ẩn, chấm, kép, rãnh, đường vân, inset và outset khác. Xóa


div {
    border: 1px dashed #333;
}

4,


div {
    border: 1px dashed #333;
}

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

Đây là những điều cơ bản. Nếu bạn muốn triển khai đường viền theo 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 thêm một số đường viền thú vị

Độ 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 {
    border: 1px dashed #333;
}

6 và chiều cao và chiều rộng của hai phần tử giả có thể được thay đổi khi chuyển 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);
    }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

CodePen Demo -- chiều rộng đường viền hoạt ảnh

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 gạch ngang , bạn có thể dễ dàng tạo đường viền nét đứt


div {
    border: 1px dashed #333;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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;
}

7. 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;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hiệu ứng như sau

OK, tại thời điểm này, hoạt hình đường viền nét đứt của chúng ta thực sự là một phần quan trọng của việc hoàn thành. Mặc dù


div {
    border: 1px dashed #333;
}

8 không hỗ trợ hoạt ảnh, nhưng độ dốc thì có. Hãy thêm hiệu ứng


div {
    border: 1px dashed #333;
}

6 vào div ở trên và thêm hoạt ảnh

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

0 khi chúng ta


div {
    border: 1px dashed #333;
}

6, thay đổi

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

2 của phần tử


div {
    border: 1px dashed #333;
}

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

OK, nhìn vào hiệu ứng, di chuột vào thời gian, đường viền có thể di chuyển, bởi vì toàn bộ hoạt ảnh là hoạt ảnh được kết nối đầu tiên và cuối cùng, hoạt ảnh vòng lặp vô hạn trông giống như một đường viền đứt quãng luôn chuyển động, đây là một miếng bịt mắt nhỏ hoặc một miếng nhỏ . các

Đây là một mẹo khác, nếu chúng ta muốn đường viền nét đứt hoạt động từ các đường viền khác, hãy chuyển sang đường viền nét đứt và sau đó tạo hiệu ứng động cho đường kẻ. Nếu bạn muốn lưu một số mã, sử dụng

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

3 sẽ nhanh hơn, như thế này:


div {
    border: 1px dashed #333;
}

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

Để giải quyết vấn đề này, chúng ta có thể thay thế

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

3 bằng

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

5, vì

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

5 có thể đặt

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

7. Điều này giải quyết vấn đề một cách hoàn hảo


div {
    border: 1px dashed #333;
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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 viền nét đứt

Các cách sử dụng tuyệt vời 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 {
    border: 1px dashed #333;
}

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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 và chiều rộng và chiều cao của phần tử cha giống như của phần tử cha

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

8

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

9

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


div {
    border: 1px dashed #333;
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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 nhìn 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 của chuyển màu

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 {
    border: 1px dashed #333;
}

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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 Conic-gradient

Trước khi giới thiệu

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;
}

0, hãy nói về gradient góc

Linear-gradient là cái chính được sử dụng ở trên. Chúng ta có thể đạt được chính xác hiệu ứng tương tự với gradient góc

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;
}

2

Hãy thử sử dụ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;
}

2 để đạt được hiệu ứng tương tự, lần này với phong cách tối hơn. Mã lõi như sau


div {
    border: 1px dashed #333;
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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 clip-path

Lại là bạn cũ

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;
}

0, và những điều thú vị sẽ không bao giờ vắng bó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;
}

0 có thể tự tạo hiệu ứng động cho điểm tọa độ, chuyển đổi từ hình cắt này sang 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

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

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

Ở đây do phần tử sẽ bị crop nên mượn phần tử giả làm nền cho phần crop và hoạt ảnh là đủ, ưu điểm của việc dù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;
}

0, đường viền bị cắt sẽ không tạo ra các hình tam giác nhỏ. Ngoài ra, phương pháp này hỗ trợ các góc tròn

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;
}

7

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

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

Sử dụng tràn thông minh

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 biên giới như vậy

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

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;
}

8 nhận ra?

Hãy xem

CodePen Demo -- 巧用overflow及transform实现线条hover效果

Hai điểm cốt lõi

chúng tôi sử dụng

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

9 để ẩn toàn bộ phần tử nằm ngoài vùng chứa

chúng tôi sử dụng
```
div {
    border: 1px dashed #333;
}
```
30 để điều khiển tâm quay của phần tử

Bạn có nhận thấy rằng hầu hết tất cả các hiệu ứng CSS thú vị đều sử dụng một kỹ thuật tương tự không?

* 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 việc 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. *

Sử dụng thông minh hình ảnh đường viền

Với


div {
    border: 1px dashed #333;
}

31, chúng tôi cũng có thể triển khai một số hoạt ảnh đường viền thú vị. Có một bài viết rất hay về


div {
    border: 1px dashed #333;
}

31 - Việc sử dụng đúng border-image nên chúng ta sẽ không đi sâu vào định nghĩa cơ bản trong bài viết này

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

Bạn có thể sử dụng các tính năng của


div {
    border: 1px dashed #333;
}

33 và


div {
    border: 1px dashed #333;
}

34 để có được mẫu đường viền tương tự


div {
    border: 1px dashed #333;
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

Bản demo CodePen -- Bản 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, nó cũng giải thích cách sử dụng


div {
    border: 1px dashed #333;
}

35, điều này rất thú vị

Khác với ví dụ trên, chúng ta chỉ cần làm pattern, di chuyển, tức là chúng ta cần một hình nền như thế nà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

hình ảnh đường viền && Gradients


div {
    border: 1px dashed #333;
}

31 cũng có thể được tô trực tiếp bằng màu hoặc độ dốc, ngoài việc đăng các tham chiếu đến


div {
    border: 1px dashed #333;
}

37

Bạn có thể tạo hiệu ứng đường viền trong CSS không?

Có vô số khả năng tạo hiệu ứng cho đường viền trong CSS . Tùy thuộc vào trường hợp sử dụng, bạn có thể dựa vào cái này hay cái kia.

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

Kiểu đường viền không hoạt ảnh . Xem bên dưới để biết thêm thông tin về các thuộc tính riêng lẻ này. Là một màu của các thuộc tính màu đường viền cụ thể. Là màu của các thuộc tính độ rộng đường viền cụ thể.

programming css

Hoạt hình css đường viền nút

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

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

Các cách sử dụng tuyệt vời khác cho độ dốc

Thay đổi màu của chuyển màu

Sử dụng thông minh Conic-gradient

Sử dụng thông minh clip-path

Sử dụng tràn thông minh

Sử dụng thông minh hình ảnh đường viền

hình ảnh đường viền && Gradients

Bạn có thể tạo hiệu ứng đường viền trong CSS không?

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội