Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Animations chargement et lecture audio

Créer un effet de préchargement avec CSS

Création: janvier 2011Modifié:

  • 1
    Intro
  • 2
    Just a Demo
  • 3
    Loading
  • 4
    Play
  • 5
    Keyframes
  • 6
    Only CSS Animations
  • 7
    No Javascript
  • 8
    No Images
Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Safari Chrome
Partagez
Facebook Twitter

Votez

31 votes4.36

Démo Full CSS. Animation de préchargement et animation de lecture en CSS uniquement. Utilisation de @keyframes en CSS3. Aucune images et aucun Javascript n’est utilisé.

Pour cette démo, survolez chaque "chanson" du player et visualisez l’effet :

  • Pendant les 3 premières secondes, l’effet de chargement est actif : la "chanson" se charge.
  • Pendant les 7 secondes suivantes, l’effet de lecture est actif : la "chanson" se joue.

Évidemment, ceci est juste une démo. Aucun son n’est joué. Vous pouvez bien sur adaptez ce code pour réaliser un player audio en Full CSS.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par max, le 21 février 2011

coooooooooooooool

#2par Supercolosse, le 4 novembre 2011

I love music !

#3par miyu., le 10 septembre 2012

J’aimerai savoir s’il est possible d’obtenir le css3 pour cet effet ?

#4par css3create, le 13 septembre 2012

@miyu : Il suffit pour cela de regarder le code source de la page ! :)

#5par philippegui2, le 8 juillet 2013

ça c’est un travail de pro !!!

#6par Scherzo, le 20 novembre 2013

De l’excellent travail, un gros bravo ! Je soutiens votre site ainsi que votre travail, quand j’ai besoin de quelque chose je ne suis jamais déçu. Encore un énorme bravo à vous !


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)