Hướng dẫn dashed border animation css - hoạt hình đường viền đứt nét css

Tôi đã thấy bài viết này http://tympanus.net/tutorials/borderanimationsvg/

Tôi muốn thêm điều này trong blog WP của tôi. Vì vậy, mỗi bài viết mới có hoạt hình này trên biên giới của nó. Nhưng vấn đề là nó ở SVG. Dù sao tôi cũng có thể làm cho hoạt hình này hoạt động mà không cần sử dụng SVG và tôi cũng không muốn sử dụng JavaScript.

Giả sử mã là:

.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

<div class="go"></div>

Harry

85,4K25 Huy hiệu vàng193 Huy hiệu bạc205 Huy hiệu đồng25 gold badges193 silver badges205 bronze badges

Đã hỏi ngày 6 tháng 2 năm 2015 lúc 12:28Feb 6, 2015 at 12:28

Sarthak Sharmasarthak SharmaSarthak Sharma

6492 Huy hiệu vàng7 Huy hiệu bạc17 Huy hiệu đồng2 gold badges7 silver badges17 bronze badges

4

Điều này rất có thể với CSS và khá đơn giản khi sử dụng nhiều nền và thay đổi vị trí của chúng bằng hình ảnh động.

.border {
  height: 100px;
  width: 200px;
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}
.border:hover{
    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>

Dưới đây là một mẫu với chuyển động liên tục của các đường viền ngay từ tải trang.

.border {
  height: 100px;
  width: 200px;
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border">Some text</div>

Các khoản tín dụng cho Web-tiki đã giúp khắc phục sự biến dạng nhỏ ban đầu có mặt ở cuối mỗi vòng lặp của hình ảnh động.

Đã trả lời ngày 6 tháng 2 năm 2015 lúc 12:49Feb 6, 2015 at 12:49

8

Dựa trên câu trả lời của Harry

Điều này có thể làm động tất cả các hình dạng với tất cả các kích cỡ

div{
margin:10px;
}
.size1{
background:black;
width:100px;
height:100px;
}

.size2{
background:black;
width:300px;
height:100px;
}


.active-animatioon {
    background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
    background-position: left top, right bottom, left bottom, right   top;
    animation: border-dance 1s infinite linear;
  }
  @keyframes border-dance {
    0% {
      background-position: left top, right bottom, left bottom, right   top;
    }
    100% {
      background-position: left 15px top, right 15px bottom , left bottom 15px , right   top 15px;
    }
  }
}

<div class="size1 active-animatioon"></div>
<div class="size2 active-animatioon"></div>

Đã trả lời ngày 24 tháng 10 năm 2018 lúc 7:39Oct 24, 2018 at 7:39

2

Đây là một cách để làm điều đó mà không cần phải chỉ định kích thước của phần tử bạn muốn đường viền xoay trên:

.rotating-border {
  width: max-content;
  background: linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(90deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%), linear-gradient(0deg, purple 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  padding: 10px;
  animation: border-dance 4s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  }
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}

<div class="rotating-border">Hello World</div>

Đã trả lời ngày 6 tháng 8 năm 2019 lúc 19:07Aug 6, 2019 at 19:07

CascadiajscascadiajsCascadiaJS

2.1812 Huy hiệu vàng27 Huy hiệu bạc45 Huy hiệu Đồng2 gold badges27 silver badges45 bronze badges

1

Với CSS thuần túy, bạn có thể sử dụng

<div class="go"></div>

.border {
  height: 100px;
  width: 200px;
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}
.border:hover{
    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}

Mã CSS mẫu:

<div class="go"></div>

Thử nghiệm:

<div class="go"></div>

<div class="go"></div>

Đã trả lời ngày 6 tháng 2 năm 2015 lúc 12:52Feb 6, 2015 at 12:52

Irvin Domininirvin DomininIrvin Dominin

30.7k9 Huy hiệu vàng80 Huy hiệu bạc 109 Huy hiệu đồng9 gold badges80 silver badges109 bronze badges

8

Hoạt hình một yếu tố giả hoạt động tốt hơn cho nút tròn của tôi:

<div class="go"></div>

<div class="go"></div>

Đã trả lời ngày 19 tháng 2 năm 2020 lúc 8:55Feb 19, 2020 at 8:55

NicolasnicolasNicolas

711 Huy hiệu bạc1 Huy hiệu đồng1 silver badge1 bronze badge

Mã này được điều chỉnh từ câu trả lời được viết bởi @harry, được sửa đổi để trả lời câu hỏi được đăng bởi @Dude, sẽ hoạt động cho một div với bất kỳ chiều rộng và chiều cao nào.

<div class="go"></div>

<div class="go"></div>

Đã trả lời ngày 15 tháng 2 năm 2018 lúc 21:07Feb 15, 2018 at 21:07

STEMKOSKISTEMKOSKIStemkoski

8.7963 huy hiệu vàng45 Huy hiệu bạc61 Huy hiệu đồng3 gold badges45 silver badges61 bronze badges

2

Đây chỉ là một ví dụ nhanh chóng, nhưng nó sử dụng các hiệu ứng giả để 'di chuyển' đường viền trên máy bay lượn (lưu ý. KeyFrames sẽ có lợi hơn nếu bạn muốn 'tiếp tục' hiệu ứng)

Một ví dụ tốt hơn

Điều này có thể phù hợp với bạn tốt hơn kể từ đó, hoạt hình cũng sẽ dễ dàng tiếp tục hơn:

<div class="go"></div>

<div class="go"></div>

Đã trả lời ngày 6 tháng 2 năm 2015 lúc 12:44Feb 6, 2015 at 12:44

jbutler483jbutler483jbutler483

23.4K9 Huy hiệu vàng87 Huy hiệu bạc141 Huy hiệu đồng9 gold badges87 silver badges141 bronze badges

1