Suivre

Animations chargement et lecture audio

Créer un effet de préchargement avec CSS

Création: janvier 2011Modifié: 9 février 2011

1

Intro
2

Just a Demo
3

Loading
4

Play
5

Keyframes
6

Only CSS Animations
7

No Javascript
8

No Images

Contenu

HTML + CSS NO JS NO IMG

Navigateurs

Safari Chrome

Propriétés CSS3

box-shadow animation gradient

Partagez

Facebook Twitter

Votez

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 !

Démos

Tutoriels