Czy można utworzyć okrąg, używając tylko HTML5/CSS3, który ma ramkę, która przebiega tylko w kółko? Jeśli nie, jakie techniki mogę zastosować, aby osiągnąć ten efekt? Wolałbym używać czystych elementów DOM, ale jeśli muszę, mogę rysować na płótnie lub spinować SVG.Koło HTML5/CSS3 z częściową krawędzią
Odpowiedz
Tak, to jest możliwe - patrz poniżej:
demo
.circle {
position: relative;
margin: 7em auto;
width: 16em;
height: 16em;
border-radius: 50%;
background: lightblue;
}
.arc {
overflow: hidden;
position: absolute;
/* make sure top & left values are - the width of the border */
/* the bottom right corner is the centre of the parent circle */
top: -1em;
right: 50%;
bottom: 50%;
left: -1em;
/* the transform origin is the bottom right corner */
transform-origin: 100% 100%;
/* rotate by any angle */
/* the skew angle is 90deg - the angle you want for the arc */
transform: rotate(45deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 1em navy;
width: 200%;
height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
<div class='circle'>
<div class='arc'></div>
</div>
dlaczego overcomplicate - http://jsfiddle.net/8SUPX/? :) –
W ten sposób nie można tworzyć łuków N-degree. Tylko 90,180 lub 270. – gkond
Przepraszam za moją niewiedzę, ale jak zmienić długość łuku? KPthunder wspomniał, że chciałby móc płynnie animować go od 0 do 100% wokół koła. – SeanNieuwoudt
To możliwe.
- Narysuj dwa kręgi, używając
border-radius
jeden na drugim. - Wykonaj jeden lub więcej łuków obu okręgów
transparent
, zmieniającborder-color
. - Użyj
transform
, aby obrócić drugie kółko, a otrzymasz łuk o odpowiednim rozmiarze.
Oto demo: http://jsfiddle.net/kJXwZ/2/
.wrapper {
position: relative;
margin: 20px;
}
.arc {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 100%;
border: 1px solid;
}
.arc_start {
border-color: transparent red red red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arc_end {
border-color: red red red transparent;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
<div class="wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>
Nie można uzyskać mniej niż 1/4 koła za pomocą tej metody, ponieważ jedna z ćwiartek granicy zawsze będzie się wyświetlać ... – Justin
ta wykorzystuje JavaScript, tak więc zrywa z oryginalnego wymogu :(
.. to ma jednak dostarczyć
Istnieje >>demo < < tutaj
@gkond Dzięki, że pochodzi to od twojej odpowiedzi
// create a circle using HTML5/CSS3/JS which has a border that only goes part-way around
// the circle .. and which can be smoothly animated from 0% to 100% around the circle
// this solution allows for animation and still results in relatively clean code
// we use four quarter-circles, all hidden away behind a white square to start with..
// all four are rotated out clockwise, and each quarter will stop at it's own maximum:
// q1 at 25%, q2 at 50% .. etc. once we reach a value at or over 25%, all four quarters
// should be out from behind the white square, and we can hide it.. it needs to be
// hidden if we display a value over 75%, or else q4 will end up going in behind it again
// .. also, since the top border will usually sit between the angles of -45 to 45, we
// rotate everything by an extra -45 to make it all line up with the top nicely
var fromHidden = -90;
// utility funciton to align 0 degrees with top
// takes degrees and returns degrees - 45
function topAlign(degrees) {
return degrees - 45
};
// utility function to rotate a jQuery element
// takes element and the degree of rotation (from the top)
function rotate(el, degrees) {
var degrees = topAlign(degrees || 0);
el.css(
'transform', 'rotate(' + degrees + 'deg)',
'-webkit-transform', 'rotate(' + degrees + 'deg)',
'-moz-transform', 'rotate(' + degrees + 'deg)',
'-ms-transform', 'rotate(' + degrees + 'deg)',
'-o-transform', 'rotate(' + degrees + 'deg)'
)
}
// function to draw semi-circle
// takes a jQuery element and a value (between 0 and 1)
// element must contain four .arc_q elements
function circle(el, normalisedValue) {
var degrees = normalisedValue * 360; // turn normalised value into degrees
var counter = 1; // keeps track of which quarter we're working with
el.find('.arc_q').each(function() { // loop over quarters..
var angle = Math.min(counter * 90, degrees); // limit angle to maximum allowed for this quarter
rotate($(this), fromHidden + angle); // rotate from the hiding place
counter++; // track which quarter we'll be working with in next pass over loop
});
if (degrees > 90) { // hide the cover-up square soon as we can
el.find('.arc_cover').css('display', 'none');
}
}
// uses the the circle function to 'animate' drawing of the semi-circle
// incrementally increses the value passed by 0.01 up to the value required
function animate(el, normalisedValue, current) {
var current = current || 0;
circle(el, current);
if (current < normalisedValue) {
current += 0.01;
setTimeout(function() {
animate(el, normalisedValue, current);
}, 1);
}
}
// kick things off ..
animate($('.circle'), 0.69);
.circle {
position: relative;
margin: 20px;
width: 120px;
height: 120px;
}
.arc_q {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid;
border-color: transparent green transparent transparent;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.arc_cover {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
background-color: white;
}
<div class="circle">
<div class="arc_q"></div>
<div class="arc_q"></div>
<div class="arc_q"></div>
<div class="arc_q"></div>
<div class="arc_cover"></div>
</div>
Oh awesome - dziękuję bardzo! Właśnie użyta na stronie, którą buduję - przydzieli ci w kodzie :) –
Aby to zrobić, można użyć prostych właściwości ramkach jeden element i jedną klasę. Byłoby to leczenie inline, inline-block lub block, w zależności od tego, gdzie umieścisz klasę easy-circle i jak/jeśli ustawisz styl.
<!DOCTYPE html>
<html>
<head>
<style>
.easy-circle {
background: transparent;
border: 1em solid black; /* color not required, may show device fail */
border-color: red green blue transparent;
height: 10em;
width: 10em;
-moz-border-radius: 6em; /* height/2 + border thickness */
-webkit-border-radius: 6em;
border-radius: 50%; /* more than 50, shape-size adjustment irrelevant */
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg); /* transform optional */
}
</style>
</head>
<body>
<div class="easy-circle">
</div>
</body>
</html>
Najprostszym sposobem na ożywienie jest użycie klatek kluczowych css.
http://jsfiddle.net/8SUPX/644/
/**
* HTML5/CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
.circle {
\t position: relative;
\t margin: 6em auto;
\t width: 12em; height: 12em;
\t border-radius: 50%;
\t background: transparent;
\t border:20px solid #efefef;
\t border-top-color: #efefef;
border-right-color: #efefef;
border-bottom-color: #efefef;
border-left-color: #efefef;
-webkit-transition:.5s;-moz-transition:.5s;transition:.5s;
}
.circle:hover{
-webkit-animation: animix 0.5s 1;
-webkit-animation-fill-mode: forwards;
-moz-animation: animix 0.5s 1;
-moz-animation-fill-mode: forwards;
animation: animix 0.5s 1;
animation-fill-mode: forwards;
}
//Animate
@-webkit-keyframes animix {
0% {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
25% {
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
border-top-color: red;
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
75% {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: transparent;
}
100% {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
}
@keyframes animix {
0% {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
25% {
border-top-color: red;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
border-top-color: red;
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
75% {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: transparent;
}
100% {
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
}
<div class="circle"> </div>
- 1. Matplotlib: wykreślanie przezroczystego histogramu z nieprzezroczystą krawędzią
- 2. Niestandardowa dyrektywa Laravel z częściową
- 3. Koło Libgdx z linewidth
- 4. Dlaczego nazywamy to "Relaks" krawędzią?
- 5. Nodejs wysyłają częściową odpowiedź
- 6. rozmiar węzła z kształtu = koło
- 7. Specjalizacja metodą częściową C++
- 8. STM z częściową atomowością dla niektórych telewizorów
- 9. gładkie koło postępu gwt
- 10. Koło wielokątów przecięcia
- 11. jquery płótno koło
- 12. css - koło z marginesem na granicy
- 13. Android Kształt: koło z krzyżem (plus)
- 14. Koło svg nie jest rysowane z javascript
- 15. Płótno narysuj koło z kwadratową krzywą
- 16. UIBezierPath koło do rysowania z różnymi uderzeniami
- 17. Jak utworzyć koło z aplikacji django?
- 18. ProgressDialog przędzenie koło
- 19. narysuj wypełnione koło
- 20. Włącz częściową kompilację w IntelliJ IDEA
- 21. Koło czasu w python3 pandy
- 22. Wydarzenia koło myszy w Reactjs
- 23. Koło rysowania Androida wokół tekstu
- 24. Dziwne wielkie koło Obliczanie odległości
- 25. Okno dialogowe Android asyncTask Koło
- 26. Czysta CSS Gradient koło granicy
- 27. Przyciemnianie obrazów tła z częściową przezroczystością za pomocą CSS/Javascript
- 28. Jak korzystać z przekierowania .htaccess na częściową ścieżkę?
- 29. Szyny 4 - renderowanie zbiór z częściową nazwą innej zmiennej
- 30. Utwórz częściową przerywaną linię w ggplot2
co "część drogi"? 1/4, 1/2, 3/4? czy coś bardziej arbitralnego? – ultranaut
Coś, co można płynnie animować od 0% do 100% wokół koła. – KPthunder