Hướng dẫn how do you animate a border color in css? - làm thế nào để bạn làm động một màu đường viền trong css?

Tôi muốn làm động biên giới của một yếu tố bằng CSS3, cho dù đó là ở trạng thái di chuột hoặc trạng thái bình thường. Ai đó có thể cung cấp cho tôi một đoạn mã cho cái này hoặc có thể hướng dẫn?

Tôi có thể làm điều này bằng cách sử dụng jQuery nhưng tìm kiếm một số giải pháp CSS3 thuần túy.

Volker E.

5.79411 Huy hiệu vàng46 Huy hiệu bạc64 Huy hiệu đồng11 gold badges46 silver badges64 bronze badges

hỏi ngày 28 tháng 2 năm 2012 lúc 5:35Feb 28, 2012 at 5:35

coure2011coure2011coure2011

38.5K77 Huy hiệu vàng211 Huy hiệu bạc335 Huy hiệu đồng77 gold badges211 silver badges335 bronze badges

Bạn có thể sử dụng CSS3 transition cho việc này. Hãy xem ví dụ này:

http://jsfiddle.net/ujDkf/1/

Đây là mã chính:

#box {
  position : relative;
  width : 100px;
  height : 100px;
  background-color : gray;
  border : 5px solid black;
  -webkit-transition : border 500ms ease-out;
  -moz-transition : border 500ms ease-out;
  -o-transition : border 500ms ease-out;
  transition : border 500ms ease-out;
}

#box:hover {
   border : 10px solid red;   
}

Volker E.

5.79411 Huy hiệu vàng46 Huy hiệu bạc64 Huy hiệu đồng11 gold badges46 silver badges64 bronze badges

hỏi ngày 28 tháng 2 năm 2012 lúc 5:35Feb 28, 2012 at 5:50

38.5K77 Huy hiệu vàng211 Huy hiệu bạc335 Huy hiệu đồng

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  vertical-align: middle;
  position: relative;
}
button::before, button::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #60daaa;
  border-left-color: #60daaa;
  -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

  Draw

Bạn có thể sử dụng CSS3 transition cho việc này. Hãy xem ví dụ này:Nov 1, 2017 at 12:55

1

Đây là mã chính:

#box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: gray;
  border: 5px solid black;
  display: block;
}

#box:hover {
  border-color: red;
  animation-name: flash_border;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
}

@keyframes flash_border {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

@-webkit-keyframes flash_border {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

@-moz-keyframes flash_border {
  0% {
    border-color: red;
  }
  50% {
    border-color: black;
  }
  100% {
    border-color: red;
  }
}

roll over me

Đã trả lời ngày 28 tháng 2 năm 2012 lúc 5:50Nov 1, 2017 at 12:18

Bạn cũng có thể thử điều này ...Tahir

Đã trả lời ngày 1 tháng 11 năm 2017 lúc 12:553 silver badges14 bronze badges

2

Nếu bạn cần chuyển đổi để chạy vô hạn, hãy thử ví dụ dưới đây:

Đã trả lời ngày 1 tháng 11 năm 2017 lúc 12:18

.class {
  color: tomato;
  border: 10px solid currentColor;
  transition: color 250ms linear;

  // not part of solution just layout
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  text-transform: uppercase;
}

.class:hover {
  color: rebeccapurple;
}

color way

TahirtahirNov 9, 2021 at 3:14

T04435T04435T04435

3023 Huy hiệu bạc14 Huy hiệu Đồng4 gold badges51 silver badges52 bronze badges

CSS màu đường viền có thể được hoạt hình không?

Bạn có thể tạo kiểu cho 4 màu khác nhau đến biên giới trong CSS không?

Cú pháp để viết màu cho đường viền trong CSS là gì?

Bạn có thể làm động bằng cách sử dụng CSS không?