creare un'immagine da css

sto cercando di fare la prossima cosa in css:creare un'immagine da css

enter image description here

quando l'utente sopra su tutta l'immagine con il suo mouse,

il CSS sarebbe cambiato:

enter image description here

in numero dell'immagine 2 e 3, devo permettergli di premere i piccoli cerchi. L'ho abilitato.

enter image description here

non ci sono riuscito per iniziare la linea blu dal piccolo cerchio (come nella immagine 1):

questa linea blu può andare a sinistra oa destra per un dato input (100 colorerà tutta la giusta forma grigia. -100 colorerà tutta la forma grigia sinistra.in questo esempio, presumo che l'utente inserisca il parametro: 25. e quindi il quarto della giusta forma grigia è stato colorato)

qualcuno può aiutarmi con quello per favore?

la linea blu è nella classe PersonaCanvasMini ed è esattamente come PersonaCanvas

qualsiasi aiuto apprezzato!

Ecco il mio jsfiddle:

http://jsfiddle.net/kyfha/74/

questo è il mio html:

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();"> 

    <div class="PersonaCanvas"> 
     <div class="smallCircle" onclick="showProjection();"></div> 
     <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div> 
    </div> 

    <div id="details" style="display: none"> 
     <div id="dolarsDetails">77$</div> 
     <div id="projOrBurn">Projection</div> 
    </div> 

    <div id="mainShape" class="bigCircle"> 
     <div id="cpaDetails">7.03</div> 
    </div> 

    <div class="PersonaCanvasMini"></div> 
    <div id="mainLine" style="display:none"></div> 
    <div id="secondaryLine" style="display:none"></div> 
</div>

e il mio css è nel jsfiddle.

fonte

2013-12-11 Alon Shmiel

vostro violino ha js. Penserei che avresti bisogno di unire css e js per ottenere gli effetti che stai chiedendo. – DrCord

@DrCord L'ho messo nell'area HTML. Grazie. –

Cosa ti fa pensare che il CSS sia la tecnologia più appropriata per questo? Il CSS non è un linguaggio grafico; è un linguaggio di layout. Hai preso in considerazione alternative come SVG. Posso dire con certezza che questo sarebbe un ordine di grandezza più facile da ottenere in SVG rispetto ai CSS, in particolare gli aspetti di controllo del mouse. HTML Canvas è un'altra opzione da prendere in considerazione. Ci sono un sacco di librerie JS per SVG e Canvas che renderanno tutto questo veramente facile. – Spudley

Alon, ciò che si sta cercando di ottenere può essere fatto con jQuery + CSS O potrebbe essere meglio provare ad utilizzare la libreria javascript di Kineticjs per lavorare con canvas HTML. Se hai bisogno di legare i dati in tempo reale alla tua grafica, dovresti probabilmente usare Angularjs insieme a Kineticjs O con jQuery (se non puoi evitarlo).

Nota .. Kineticjs è molto facile da imparare e da usare e vi suggerisco di iniziare con che: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

fonte

2013-12-14 06:55:18 GRowing

creare un'immagine da css

risposta

Problemi correlati