Hoạt ảnh đường viền xung css

Đoạn mã sau là mã CSS kích hoạt hoạt ảnh xung này. Sao chép chúng và dán chúng vào tệp CSS của bạn. Hãy nhớ đổi tên tệp CSS của bạn thành 'style. css'

Sao chép

.relative {

  vị trí . tương đối ;

  lề . 50vh tự động ;

  chiều rộng . 60px ;

}

.span {

  vị trí . tuyệt đối ;

  chiều rộng . 60px ;

  chiều cao . 60px ;

  bán kính đường viền . 50% ;

  đầu . 0 ;

  trái . 0 ;

  đường viền . 0 ;

  -webkit-animation . sploosh 2s cubic-bezier ( 0. 165 , 0. 84 , 0. 44 , 1 );

  -webkit-animation-iteration-count . vô hạn ;

}

.span:nth-child ( 2 ) {

  -webkit-animation-delay . . 33 giây ;

  -webkit-animation-duration . 2. 2s ;

}

nút {

  đường viền . 0 ;

  lề . 50vh tự động ;

  bán kính đường viền . 50% ;

  hiển thị . chặn ;

  chiều rộng . 60px ;

  chiều cao . 60px ;

  màu nền . rgba ( 71 , 225, 141, 1);

  -webkit-animation . xung 2s hạ nhiệt ;

  -webkit-animation-iteration-count . vô hạn ;

}

@-webkit-keyframes sploosh {

0% {

    bóng hộp . 0 0 0 0px rgba . 7(71, 225, 141, .7 );

    nền . rgba ( 71 , 225 . 7, 141, .7 );

}

80% {

    nền . rgba ( 66 , 166, 223, 0);

}

100% {

    bóng hộp . 0 0 0 120px rgba(66, 166, 223, 0);

}

}

@-webkit-keyframes pulse {

0% {

    -webkit-transform . tỷ lệ ( 1 );

}

3. 3% {

    -webkit-transform . tỷ lệ ( 1. 1 );

}

16. 5% {

    -webkit-transform . tỷ lệ ( 1 );

}

33% {

    -webkit-transform . tỷ lệ ( 1. 1 );

}

100% {

    -webkit-transform . tỷ lệ ( 1 );

}

}

Hy vọng rằng bạn đã có thể tạo một thiết kế hoạt hình xung đơn giản bằng cách sử dụng đoạn mã trên

Hoạt hình xung nút CSS

Bây giờ bạn phải tạo hoạt ảnh xung nút bằng CSS. Điều này có nghĩa là hiệu ứng hoạt hình này đã được thêm vào một nút

Trong trường hợp này, trước tiên, một nút đã được tạo và một số hoạt ảnh cơ bản đã được thêm vào. Sau đó, hoạt hình xung đã được thêm vào nó bằng CSS.

Tải xuống bản trình diễn

Đầu tiên tôi tạo một nút có thêm một số hoạt ảnh thay đổi màu sắc. Điều này có nghĩa là màu nền của nút sẽ thay đổi trong điều kiện bình thường. Sau đó, hiệu ứng hoạt hình xung đã được thêm vào

Tôi đã thêm tất cả các thông tin cơ bản bằng các mã sau. Ở đây chỉ có một dòng HTML được sử dụng để tạo nút mà thôi

Sao chép

  lớp = "nút xung">Auto-Pulse

Bây giờ bạn phải thêm hoạt ảnh xung vào nút bằng CSS sau. Sao chép các mã sau và thêm chúng vào tệp CSS của bạn

Sao chép

html {

    hiển thị . linh hoạt ;

    align-items . trung tâm ;

    biện minh cho nội dung . trung tâm ;

    chiều cao . 100% ;

}

body {

    màu nền . #222222 ;

    tự căn chỉnh . trung tâm ;

    căn chỉnh văn bản . trung tâm ;

}

/* Đặt lại nút và kiểu */

nút {

    lề . 15px tự động ;

    họ phông chữ . "Montserrat" ;

    bán kính đường viền . 100px ;

    phần đệm . 15px 20px ;

    cỡ chữ . 20px ;

    màu . #ffffff ;

    con trỏ . con trỏ ;

    đường viền . 0px rắn #000 ;

}

/* Bắt đầu hoạt ảnh Auto-Pulse */

. nút xung {

    hình ảnh động . borderPulse 1000 mili giây vô hạn thoát ra ,

             ColorShift 10000 mili giây vô hạn dễ sử dụng ;

}

/* Khai báo hiệu ứng chuyển màu */

@keyframes colorShift {

0%, 100% {

            nền . #0045e6 ;

}

33% {

        nền . #fb3e3e ;

}

66%{

        nền . #0dcc00 ;

}

}

/* Khai báo hoạt ảnh xung viền */

@keyframes borderPulse {

0% {

    bóng hộp . inset 0px 0px 0px 5px . 4 rgba(255, 255, 255,.4 ), 0px 0px 0px 0px rgba(255,255,255,1);

}

100% {

    bóng hộp . inset 0px 0px 0px 3px . 2 rgba(117, 117, 255,.2 ), 0px 0px 0px 10px rgba(255,255,255,0);

}

}

Nếu vì lý do nào đó mà các mã trên không hoạt động thì bạn có thể nhờ sự trợ giúp của nút tải xuống ở trên

Hoạt hình xung văn bản CSS

Bây giờ chúng ta sẽ tìm hiểu cách thêm hoạt ảnh xung vào văn bản. Bởi vì ở nhiều nơi chúng tôi sử dụng hình ảnh động trong văn bản. Có một số cách để làm động văn bản. Tuy nhiên, hoạt hình xung văn bản CSS cũng được sử dụng ở nhiều nơi.

Nó được thực hiện một cách rất đơn giản. Chỉ một vài dòng CSS đã được sử dụng để tạo hoạt hình xung văn bản này.

Tải xuống bản trình diễn

Nếu bạn muốn biết hoạt ảnh xung CSS này hoạt động như thế nào thì bạn có thể xem bản trình diễn ở trên. Ở đây bạn sẽ tìm thấy tất cả các mã nguồn. Đầu tiên tôi đã thêm văn bản bằng HTML một dòng. Sau đó được thiết kế ở đây bằng CSS.

Hoạt ảnh ba giây được sử dụng ở đây. Có thể nhìn thấy văn bản khi hoạt ảnh bắt đầu. Ở giữa, tức là trong một khoảng thời gian sau 1. 5 giây, quang học của văn bản sẽ bằng 0, vì vậy tôi sẽ không thể nhìn thấy văn bản.

Tất cả thông tin đã được thêm vào để tạo hoạt ảnh xung văn bản bằng các mã HTML sau. Sao chép các mã bên dưới và thêm chúng vào tệp HTML của bạn

Sao chép

    lớp = "phần tử">Some example text

Bây giờ là lúc để triển khai hoạt ảnh xung này với một số lượng CSS. Sao chép các mã này và thêm chúng vào tệp CSS của bạn

Sao chép

html ,

body {

  chiều cao . 100% ;

  căn chỉnh văn bản . trung tâm ;

  lề . 50px tự động ;

  họ phông chữ . sans-serif ;

}

.element {

  chiều rộng . 100% ;

  chiều cao . 100% ;

  hình ảnh động . xung 3s vô hạn ;

}

@keyframes pulse {

0% {

    màu . #0682f5 ;

}

50%{

    độ mờ . 0 ;

}

100% {

    màu . #0682f5 ;

}

}

Hoạt hình xung hình ảnh CSS

Bây giờ bạn đã biết cách tạo hoạt ảnh xung hình ảnh bằng CSS. Ở trên, chúng tôi đã thêm hoạt ảnh xung này vào văn bản, trong nút. Bây giờ tôi sẽ thêm hoạt ảnh xung đơn giản này vào một hình ảnh đơn giản.

Có nhiều cách để làm cho hình ảnh trở nên hấp dẫn. Hiệu ứng di chuột là một trong số đó. Tuy nhiên, sử dụng loại hoạt hình xung này, bạn có thể làm cho bất kỳ hình ảnh nào trở nên hấp dẫn hơn.

Tải xuống bản trình diễn

Chỉ CSS được sử dụng ở đây để thực thi hình ảnh hoạt hình xung CSS này. Từ bản demo ở trên, bạn có thể tìm hiểu cách thức hoạt động của nó.

Ban đầu, một hình ảnh được thêm vào đầu tiên được làm tròn. Sau đó, hoạt ảnh màu được thêm vào xung quanh hình ảnh làm cho hình ảnh hấp dẫn hơn.

Hình ảnh cần thiết cho hoạt hình xung hình ảnh này đã được thêm bằng các mã HTML sau. Tôi chỉ sử dụng một dòng mã ở đây.

Sao chép

    class = "image-pulse">

Tải xuống bản trình diễn

Theo cách tương tự, lần đầu tiên tôi tạo một nút cho điều này. Sau đó, tôi đã thiết kế nút bằng CSS và thêm một số hiệu ứng thay đổi màu sắc bình thường cho nút

Nếu bạn muốn tải xuống tất cả mã nguồn, bạn có thể sử dụng nút tải xuống ở trên

Tất cả thông tin để tạo nút bằng mã HTML sau đã được thêm vào

Sao chép

    lớp = "nút xung->Pulse on hover

Bây giờ là lúc để triển khai hoạt ảnh xung CSS này bằng CSS. Một chút CSS đã được sử dụng ở đây. Bởi vì đầu tiên nút đã được thiết kế sau đó hoạt ảnh màu thông thường đã được thêm vào. Sau đó, ở đây hoạt hình xung CSS khi di chuột được thêm vào nút ở đây

Sao chép

html {

    hiển thị . linh hoạt ;

    align-items . trung tâm ;

  biện minh cho nội dung . trung tâm ;

    chiều cao . 100% ;

}

body {

    màu nền . #222222 ;

    tự căn chỉnh . trung tâm ;

    căn chỉnh văn bản . trung tâm ;

}

/* Đặt lại nút và kiểu */

nút {

    lề . 15px tự động ;

    bán kính đường viền . 100px ;

    phần đệm . 15px 20px ;

    đường viền . 0px rắn #000 ;

    họ phông chữ . "Montserrat" ;

    cỡ chữ . 20px ;

    màu . #ffffff ;

    con trỏ . con trỏ ;

}

/* Bắt đầu thay đổi màu cho xung khi di chuột */

. xung-nút-di chuột {

    hình ảnh động . colorShift 10000 mili giây vô hạn dễ sử dụng ;

}

/* Tiếp tục hoạt hình và thêm bóng khi di chuột */

. di chuột ,

. tiêu điểm {

    hình ảnh động . borderPulse 1000 mili giây vô hạn thoát ra ,

          colorShift 10000 mili giây vô hạn dễ sử dụng ,

          hoverShine 200 mili giây ;

}

/* Khai báo hiệu ứng chuyển màu */

@keyframes colorShift {

0%, 100% {

            nền . #0045e6 ;

}

33% {

        nền . #fb3e3e ;

}

66%{

        nền . #0dcc00 ;

}

}

/* Khai báo hoạt ảnh xung viền */

@keyframes borderPulse {

0% {

    bóng hộp . inset 0px 0px 0px 5px . 4 rgba(255, 255, 255,.4 ), 0px 0px 0px 0px rgba(255,255,255,1);

}

100% {

    bóng hộp . inset 0px 0px 0px 3px . 2 rgba(117, 117, 255,.2 ), 0px 0px 0px 10px rgba(255,255,255,0);

}

}

/* Khai báo độ sáng trên hoạt hình di chuột */

@keyframes hoverShine {

0%{

        hình nền . độ dốc tuyến tính ( 135deg , rgba(255,255,255,.4 ) 0% , rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);

}

50%{

        hình nền . độ dốc tuyến tính ( 135deg , rgba(255,255,255,0) 0%, rgba(255,255,255,.4 ) 50% , rgba(255,255,255,0) 100%);

}

100%{

        hình nền . độ dốc tuyến tính ( 135deg , rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4 ) 100% );

}

}

Hy vọng rằng từ hướng dẫn này, bạn đã có đủ loại ý tưởng thiết kế hoạt ảnh xung CSS cho mối quan hệ.

Ở đây tôi đã thảo luận với bạn cách tạo CSS Pulse Animation đơn giản, hoạt hình xung nút, hoạt ảnh xung văn bản, v.v. Nếu bạn thích bài viết này, bạn chắc chắn có thể chia sẻ nó trên tài khoản mạng xã hội của mình