Come animare con l'HTML

September 12

Come animare con l'HTML


HyperText Markup Language è il linguaggio di programmazione di base pagina web. Una semplice pagina web può essere creato con meno di cinque righe di codice HTML inseriti in Blocco note e salvati con l'estensione ".html". Per mantenere gli utenti di Internet sulla tua pagina web, è necessario aggiungere multimediali, immagini e immagini animate. Scalable Vector Graphics possono essere incorporati nella pagina HTML per vivacizzare l'alto. SVG è più paragonabile a animazioni in Flash, ma molto più facile da attuare, se si ha già familiarità con l'HTML.

istruzione

1 Aprire Notepaf e iniziare digitando la dichiarazione XML. Questo dovrebbe essere simile a "<? Xml version =" 1.0 "standalone =" no "?>". Standalone = "no" significa che non vi è alcun riferimento a qualsiasi file esterno all'interno di questo file SVG che si sta creando.

2 Digitare il riferimento alla Document Type Definition. Quella riga di codice dovrebbe essere simile a "<! DOCTYPE svg pubblico". Il DTD definisce i dati all'interno del file SVG e convalida.

3 Iniziare codifica il codice SVG con il tag di apertura "<svg>." Creare un rettangolo che svanisce dopo cinque secondi con l'elemento "rect". SVG supporta la creazione di una varietà di forme con parole chiave per ogni come rettangoli, cerchi, ellissi, linee e poligoni.

4 Impostare le proprietà dell'elemento "rect" inserendo un valore per le coordinate x e y, larghezza, altezza, lo stile, animare attributeType, attributeName, la durata e la repeatCount. Il codice sarà simile a:

<Rect x = "20" y = larghezza "20" = "275" height = "275" style = "riempire: green">

<Animare attributeType = attributeName "CSS" = "opacità"

da = "1" a = "0" dur = "5s" repeatCount = "indefinito" />

</ Rect>

5 Salvare il file con estensione ".svg" dal Blocco note Salva schermo dopo la chiusura della staffa SVG con "</ svg>." Il file può essere visualizzato nel browser Web facendo semplicemente doppio clic sul file salvato. Il file può anche essere incorporato in un'altra pagina HTML con il "<object>" scheda o il tag "<iframe>".

Consigli e avvertenze

  • Tutti i principali browser web supportano SVG. versioni del browser prima di IE8 avrà bisogno di un plugin down-caricabile per visualizzare immagini SVG.