आंशिक सीमा के साथ एचटीएमएल 5/CSS3 सर्किल

Question

क्या केवल एचटीएमएल 5/CSS3 का उपयोग करके एक सर्कल बनाना संभव है जिसमें एक सीमा है जो केवल सर्कल के चारों ओर भाग लेती है? यदि नहीं, तो इस प्रभाव को पूरा करने के लिए मैं किस तकनीक का उपयोग कर सकता हूं? मैं शुद्ध डोम तत्वों का उपयोग करना पसंद करूंगा, लेकिन अगर मुझे कैनवास पर आकर्षित करना है या एसवीजी को स्पिन करना है।

Answer 1

हाँ, यह संभव है - यह देखें:

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>

Answer 2

यह संभव है।

• border-radius का उपयोग करके दो मंडलियों को एक दूसरे के ऊपर खींचें।
• border-color बदलकर दोनों सर्किलों transparent दोनों में से एक या अधिक चाप बनाएं।
• दूसरे सर्कल को घुमाने के लिए transform का उपयोग करें और आपके पास आवश्यक आकार की चाप होगी।

यहाँ डेमो है:, 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>

Answer 3

यह जावा स्क्रिप्ट के साथ-साथ उपयोग करता है तो यह मूल आवश्यकता :(
से टूट जाता है .. यह तथापि देने करता है

एक >>है 703,210 < < यहाँ

@gkond धन्यवाद, मैं अपने जवाब से व्युत्पन्न

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

Answer 4

ऐसा करने के लिए, आप सरल बॉक्स के बॉर्डर गुण, एक तत्व और एक वर्ग का उपयोग कर सकते हैं। यह एक इनलाइन, इनलाइन-ब्लॉक या ब्लॉक उपचार होगा, इस पर निर्भर करता है कि आप अपनी आसान सर्कल कक्षा कहां रखते हैं, और कैसे/यदि आप शैली की स्थिति रखते हैं।

<!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> 

Answer 5

इसे एनिमेट करने का सबसे आसान तरीका सीएसएस कीफ्रेम का उपयोग कर रहा है।

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>