Créons un arrière-plan ANIMÉ sans plugin sur WORDPRESS ! скачать в хорошем качестве

Créons un arrière-plan ANIMÉ sans plugin sur WORDPRESS !

Aujourd'hui, on anime un arrière-plan sur WordPress ! Pour ça, on va commencer par choper une image d'arrière plan SVG sur https://heropatterns.com/ puis on créera une page WordPress dans laquelle on placera un groupe. On assignera une classe CSS à ce groupe et, en quelques lignes de CSS, on arrivera à créer un arrière-plan animé. Je vous met le code ci-dessous : .bg-anime{ background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23dbdbdb' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); border:1px solid #eee; animation: 60s linear 0s infinite alternate animationhorizontale; } @keyframes animationhorizontale { from { background-position:-100%; } to { background-position:100%; } } Envie de travailler avec moi ? Je vous explique tout sur mon site :) www.baptistepages.com Timestamps : 00:00 - Start 00:31 - Structure de la page 01:01 - Création de la classe bg-anime 01:46 - Définir l'image d'arrière plan 04:11 - Créer l'animation de l'arrière plan en CSS 06:44 - Supprimer l'animation sur mobile 08:29 - Merci :)