localisation actuelle： Maison > Télécharger > Effets JS > Effets spéciaux CSS3 > Effets spéciaux d'animation de transformation d'ondulation élastique dynamique CSS3
Effets spéciaux d'animation de transformation d'ondulation élastique dynamique CSS3
| Classer: Effets JS / Effets spéciaux CSS3 | Temps de libération: 2017-12-12 | visites: 1595 |
| Télécharger: 46 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Pourquoi est-ce que j'obtiens une erreur 404 lors de l'insertion d'images dans mon blog Hugo ?
- 2 dsetup16.dll – Qu’est-ce que dsetup16.dll ?
- 3 dtrsve.dll – Qu'est-ce que dtrsve.dll ?
- 4 dxcodex.ocx – Qu'est-ce que dxcodex.ocx ?
- 5 std::shared_ptr est-il Thread-Safe lors de la modification d'objets partagés ?
- 6 dsbho_02.dll – Qu’est-ce que dsbho_02.dll ?
- 7 Stratégies pour réduire le temps de démarrage et l'empreinte mémoire de votre application Java jusqu'à
- 8 Pourquoi la création de mon événement MySQL échoue-t-elle avec le message « Vous avez une erreur dans votre syntaxe SQL » ?
- 9 Pourquoi mon fichier Sass génère-t-il une erreur « CSS invalide : expression attendue » ?
- 10 Pourquoi mon ne rétrécit-il pas comme prévu ? Il semble avoir un problème de min-width: min-content non amovible.
- 11 dwin0008.dll – Qu’est-ce que dwin0008.dll ?
- 12 Quelles sont les principales différences entre les classes imbriquées statiques et non statiques en Java ?
- 13 Le prix de X Empire a grimpé jusqu'au nouvel ATH : voici ce que vous devez savoir
- 14 dwpp.dll – Qu'est-ce que dwpp.dll ?
- 15 Pourquoi le type de retour de ma méthode d'interface Go provoque-t-il une erreur de compilation ?
Derniers tutoriels
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- Aller au langage pratique GraphQL
- 1999 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1803 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2616 2024-03-29
Il s'agit d'un effet d'animation de transformation d'ondulation élastique dynamique CSS3 unique et créatif. Il s'agit d'un pur effet d'animation d'ondulation circulaire CSS3. Bien qu'il ne soit pas très pratique, vous pouvez apprendre à l'implémenter pour créer l'effet souhaité.
<!doctype html>
<html>
<tête>
<meta charset="utf-8">
<title>CSS3动感弹性波纹变换动特效</title>
<style>
corps {
arrière-plan : #1C1C1C ;
débordement : caché ;
}
.wrap {
position : absolue ;
haut : 50 % ;
gauche : 50% ;
-webkit-transform : traduire (-50%, -50%);
transformer : traduire(-50%, -50%);
marge gauche : -150px ;
}
ul {
-webkit-transform : rotate3d(0, 1, 0, 45deg);
transformation : rotation3d(0, 1, 0, 45deg);
}
ul li {
arrière-plan : #1c1c1c ;
box-shadow : encart 1px 1px 40px #19A598 ;
rayon de bordure : 50 % ;
position : absolue ;
haut : 50 % ;
gauche : 50% ;
}
li:ntième-enfant(1) {
bordure : 1px solide #189c90 ;
largeur : 30 px ;
hauteur : 30px ;
indice z : -1 ;
marge supérieure : -15px ;
marge gauche : 5px ;
-webkit-animation : spin 2s 0,2s infini ;
animation : rotation 2s 0,2s infini ;
}
li:ntième-enfant(2) {
bordure : 1px solide #169388 ;
largeur : 60px ;
hauteur : 60px ;
indice z : -2 ;
marge supérieure : -30 px ;
marge gauche : 10px ;
-webkit-animation : spin 2s 0,4s infini ;
animation : rotation 2s 0,4s infini ;
}
li:ntième-enfant(3) {
bordure : 1px solide #158a80 ;
largeur : 90px ;
hauteur : 90px ;
indice z : -3 ;
marge supérieure : -45px ;
marge gauche : 15px ;
-webkit-animation : spin 2s 0,6s infini ;
animation : rotation 2s 0,6s infini ;
}
li:ntième-enfant(4) {
bordure : 1px solide #148277 ;
largeur : 120px ;
hauteur : 120px ;
indice z : -4 ;
marge supérieure : -60 px ;
marge gauche : 20px ;
-webkit-animation : spin 2s 0,8s infini ;
animation : rotation 2s 0,8s infini ;
}
li:ntième-enfant(5) {
bordure : 1px solide #12796f ;
largeur : 150px ;
hauteur : 150px ;
indice z : -5 ;
marge supérieure : -75px ;
marge gauche : 25px ;
-webkit-animation : spin 2s 1s infini ;
animation : rotation 2s 1s infinie ;
}
li:ntième-enfant(6) {
bordure : 1px solide #117067 ;
largeur : 180px ;
hauteur : 180px ;
indice z : -6 ;
marge supérieure : -90px ;
marge gauche : 30px ;
-webkit-animation : spin 2s 1.2s infini ;
animation : rotation 2s 1,2s infinie ;
}
li:ntième-enfant(7) {
bordure : 1px solide #10675f ;
largeur : 210 px ;
hauteur : 210px ;
indice z : -7 ;
marge supérieure : -105px ;
marge gauche : 35px ;
-webkit-animation : spin 2s 1.4s infini ;
animation : rotation 2s 1,4s infinie ;
}
li:ntième-enfant(8) {
bordure : 1px solide #0e5e57 ;
largeur : 240 px ;
hauteur : 240px ;
indice z : -8 ;
marge supérieure : -120 px ;
marge gauche : 40px ;
-webkit-animation : spin 2s 1.6s infini ;
animation : rotation 2s 1,6s infinie ;
}
li:ntième-enfant(9) {
bordure : 1px solide #0d554f ;
largeur : 270px ;
hauteur : 270px ;
indice z : -9 ;
marge supérieure : -135px ;
marge gauche : 45px ;
-webkit-animation : spin 2s 1.8s infini ;
animation : rotation 2s 1,8s infinie ;
}
li:ntième-enfant(10) {
bordure : 1px solide #0c4c46 ;
largeur : 300 px ;
hauteur : 300px ;
indice z : -10 ;
marge supérieure : -150px ;
marge gauche : 50px ;
-webkit-animation : spin 2s 2s infini ;
animation : rotation 2s 2s infinie ;
}
li:ntième-enfant(11) {
bordure : 1px solide #0a443e ;
largeur : 330 px ;
hauteur : 330px ;
indice z : -11 ;
marge supérieure : -165px ;
marge gauche : 55px ;
-webkit-animation : spin 2s 2.2s infini ;
animation : rotation 2s 2,2s infinie ;
}
@-webkit-keyframes tourne {
0% {
-webkit-transform : rotation (0deg) échelle (1);
transformation : rotation (0deg) échelle (1);
}
50 % {
-webkit-transform : rotation (360 degrés) échelle (2);
transformation : rotation (360 degrés) échelle (2);
}
100% {
-webkit-transform : rotation (0deg) échelle (1);
transformation : rotation (0deg) échelle (1);
}
}
@keyframes tourne {
0% {
-webkit-transform : rotation (0deg) échelle (1);
transformation : rotation (0deg) échelle (1);
}
50 % {
-webkit-transform : rotation (360 degrés) échelle (2);
transformation : rotation (360 degrés) échelle (2);
}
100% {
-webkit-transform : rotation (0deg) échelle (1);
transformation : rotation (0deg) échelle (1);
}
}
ul li {
style de liste : aucun ;
}
</style>
</tête>
<body><script src="/demos/googlegg.js"></script>
<div class="wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div style="text-align:center;margin:30px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>
</corps>
</html>
Recommandations associées
Plug-in mobile Happy Scratch HTML5
Papier HTML5 plié dans des effets spéciaux d'animation de boîte-cadeau
Effets spéciaux du lecteur de film rétro CSS3 pur
Code flottant de la fenêtre du lecteur vidéo HTML5
Plug-in contextuel de page WinBox HTML5 léger
Barre de menu coulissante d'image en accordéon jQuery
Code CSS3 pur pour créer un menu de navigation déroulant rouge
Effets spéciaux d'affichage d'images de rotation de la molette de la souris HTML5
Recommandations populaires
jQuery+Html5 réalise un magnifique code d'animation de confession
Code d'effets spéciaux js pour la confession romantique d'un couple
Code source du jeu rebondissant H5 Panda
Code source du jeu de balle roulante H5 3D
Jeu de tir au canard sur toile HTML5
Simple js aime l'artefact de confession
Effets expressifs d'animation de particules HTML5 de Bunker