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:
//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