Chcę animować granice elementu za pomocą CSS3, bez względu na to, czy jest w stanie zawisu, czy w stanie normalnym. Czy ktoś może mi podać fragment kodu do tego lub może prowadzić?Kolor obramowania CSS3
Mogę to zrobić za pomocą jQuery, ale szukając jakiegoś czystego rozwiązania CSS3.
Do tego celu można użyć CSS3 transition. Spojrzeć na ten przykład:
Oto kod główny:
#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;
}
Jeśli potrzebujesz przejście do uruchomienia nieskończenie, spróbuj poniższego przykładu:
#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;
}
}<div id="box">roll over me</div>Można spróbować również ...
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;
position: relative;
vertical-align: middle;
}
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;
}<section class="buttons">
<button class="draw">Draw</button>
</section
Chociaż ten link może odpowiedzieć na pytanie, lepiej jest to tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi dotyczące linków mogą stać się nieprawidłowe, jeśli strona z linkami się zmieni. - [Z recenzji] (/ recenzja/niskiej jakości-posts/17804187) – robinCTS
Heya @Tahir. Jako heads-up odpowiedzi powinny być niezależne; podczas gdy mogą odwoływać się do źródeł zewnętrznych jako referencji, informacje o odpowiedzi nie powinny istnieć wyłącznie w witrynach zewnętrznych. Z tego powodu przyniosłem twój kod JSFiddle do samej odpowiedzi, przekonwertowałem SCSS na CSS i zmieniłem nazwę nazwy animacji na 'flash_border' (ponieważ nazwa' flash' była w konflikcie z czymś na stronie przepełnienia stosu). –
@ChrisForrence Dzięki stary – Tahir