Đường viền css mờ dần trong hình ảnh động

Question

Hoạt hình đường viền CSS sử dụng di chuột được sử dụng để tạo hoạt ảnh đường viền khi chúng ta di chuột qua văn bản. Các khái niệm mà chúng ta sẽ sử dụng là bộ chọn before , after và hover. Bạn nên xem qua tất cả các bộ chọn này trước khi chuyển sang phần tiếp theo trong bài viết này

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 thú vị 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

Tiếp cận. Cách tiếp cận của hoạt ảnh này là chia hoạt ảnh thành hai phần. Phía trên và bên phải sẽ được thực hiện cùng một lúc bằng cách sử dụng trước, phía dưới và bên trái sẽ được thực hiện cùng một lúc bằng cách sử dụng bộ chọn sau

Mã HTML. Chúng tôi đã tạo tệp HTML và tạo một div trong đó với h1 bên trong div. Dưới đây là mã cho cùng

<html lang="en">

<head>

<1_______48_______<3 <4=___<6 <7

<1_______48_______<3 html1=49_______3 html4=

html6html7 <7

<1_______48__________lang1_______50_______2lang1>

lang5head>

<=0_______53_______

<1_______48__________=4 =5=51_______7>

html6<"en"1lang2"en"1>

<1_______50_______5=4>

lang5=0>

lang5html>

Mã CSS. CSS cho hoạt ảnh này hơi phức tạp một chút, vì vậy hãy cố gắng hiểu nó từng bước một

Bước 1. Điều đầu tiên chúng tôi đã làm là cung cấp nền cơ bản và căn chỉnh văn bản của chúng tôi ở giữa. Dưới đây là mã cho cùng

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

Ngoài đường viền nét liền, nét đứt, CSS 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 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 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ể 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);
    }
}

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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

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 vải 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ẽ nhanh hơn khi sử dụng

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

3, như thế này:

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

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 {
    outline: 1px solid #333;
    outline-offset: -1px;

    &:hover {
        outline: none;
    }
}

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

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 cũng như chiều cao của phần tử cha giống với phần tử 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 {
    animation: rotate 4s linear infinite;
}

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

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 viền đẹp mắt sẽ xuất hiện (các phần tử 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::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);
}

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ì dọc, đ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 quả 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, vì phần tử sẽ bị cắt, mượn phần tử giả làm nền để cắt xén và hoạt ảnh là đủ, ưu điểm của việc 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;
}

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 đường viền như vậy

Tại sao bạn lại nói rằng 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;
}

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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

0 để đ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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

1, 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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

1 - Cách sử dụng đúng của border-image nên chúng tôi 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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

3 và

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

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

4 để 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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

5, đ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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

1 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:hover {
    animation: linearGradientMove .3s infinite linear;
}

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

7

programming css

Đường viền css mờ dần trong hình ảnh động

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

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

Các cách sử dụng thú vị 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à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