BIENVENUE DANS CSS MASTER
Créé Des Tunnels De Vente Uniques Sur Le Marché Grâce A La Magie Du CSS
COMMENT UTILISER LE CSS DANS SYSTEME.IO ET CLICKFUNNELS
Ce contenu est la propriété intellectuelle privée de l'entreprise Funnelity, page à ne pas partager.
CSS MASTER
#img, #button, #text,... : remplacer par l'ID de l'élément auquel tu souhaite attribuer le code
#c5e8c4 ou rgba(24,228,255,1) : choix de la couleur
transform: ... informations sur l'animation (ex : la taille, la couleur, l'angle...)
shadow: 5px 5px 18px : caractéristique de l'ombre
Les animations au survol
Zoom
<style>
#img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#img:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
</style>
Rotation
<style>
#img { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#img:hover { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); }
</style>
Dézoomer
<style>
#img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { -webkit-transform: scale(0.8); transform: scale(0.80); }
</style>
Slide
<style>
#img { margin-left: 0px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { margin-left: -30px; margin-right: 30px;}
</style>
Rotation & Dézoome
<style>
#img { -webkit-transform: rotate(20deg) ; transform: rotate(20deg) ; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { -webkit-transform: rotate(0) scale(0.8); transform: rotate(0) scale(0.8); }
</style>
Rotation et Zoom
<style>
#img { -webkit-transform: rotate(20deg) ; transform: rotate(20deg) ; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { -webkit-transform: rotate(0) scale(1.2); transform: rotate(0) scale(1.2); }
</style>
Flou
<style>
#img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { -webkit-filter: blur(0); filter: blur(0); }
</style>
Noir et blanc
<style>
#img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img :hover { -webkit-filter: grayscale(0); filter: grayscale(0); }
</style>
Noir et blanc
<style>
#img { -webkit-filter: grayscale(0%); filter: grayscale(0%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
</style>
Flou
<style>
#img { -webkit-filter: blur(0px); filter: blur(0px); -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; }
#img:hover { -webkit-filter: blur(3px); filter: blur(3px); }
</style>
Opacité
<style>
#img { opacity: .5; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { opacity: 1; }
</style>
Slide
<style>
#img { margin-top: 0px;
margin-bottom: 0px;
transition: .3s ease-in-out; }
#img:hover { margin-top: -30px; margin-bottom: 30px;
}
</style>
Morph
<style>
#img { -webkit-filter: grayscale(0) blur(0px); filter: grayscale(0) blur(0px); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#img:hover { border-radius: 50%; -webkit-transform: rotate(360deg); /* rotation de l'image */ transform: rotate(360deg); }
</style>
Opacité
<style>
#img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover { opacity: .5; }
</style>
Décalé
<style>
#img { -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#img:hover {
transform: translate(-50%, -50%) rotate(45deg);
}
</style>
Les Animations en continu
Scale Up
<style>
#img {
animation: scale-up-center 4s linear infinite alternate both;
}
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
Scale Up Coin
<style>
#img {
animation: scale-up-bl 4s linear infinite alternate both;
}
@keyframes scale-up-bl {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
}
</style>
Pliage, dépliage
<style>
#img {
animation: scale-up-ver-bottom 2s linear infinite alternate both;
}
@keyframes scale-up-ver-bottom {
0% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
}
</style>
Rotation sur place
<style>
#img {
animation: scale-up-hor-center 1s linear infinite alternate both;
}
@keyframes scale-up-hor-center {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
</style>
Pliage, dépliage
<style>
#img {
animation: scale-up-hor-left 1s linear infinite alternate both;
}
@keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
</style>
Rotation 360
<style>
#img {
animation: rotate-center 4s linear infinite both;
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
Tour sur soit
<style>
#img {
animation: rotate-vert-center 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes rotate-vert-center {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
Tour axe gauche
<style>
#img {
animation: rotate-vert-left 2s cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite both;
}
@keyframes rotate-vert-left {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: left;
transform-origin: left;
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transform-origin: left;
transform-origin: left;
}
}
</style>
Tour axe en coin
<style>
#img {
animation: rotate-tl 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes rotate-tl {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: top left;
transform-origin: top left;
}
}
</style>
Rotation de face
<style>
#img {
animation: rotate-hor-center 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes rotate-hor-center {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(-360deg);
transform: rotateX(-360deg);
}
}
</style>
Rotation diagonale
<style>
#img {
animation: rotate-diagonal-2 2s linear infinite both;
}
@keyframes rotate-diagonal-2 {
0% {
-webkit-transform: rotate3d(-1, 1, 0, 0deg);
transform: rotate3d(-1, 1, 0, 0deg);
}
50% {
-webkit-transform: rotate3d(-1, 1, 0, 180deg);
transform: rotate3d(-1, 1, 0, 180deg);
}
100% {
-webkit-transform: rotate3d(-1, 1, 0, 360deg);
transform: rotate3d(-1, 1, 0, 360deg);
}
}
</style>
Rotation 360 + taille
<style>
#img {
animation: rotate-scale-up 4s linear infinite both;
}
@keyframes rotate-scale-up {
0% {
-webkit-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(1.3) rotateZ(180deg);
transform: scale(1.3) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
</style>
Rotation + taille
<style>
#img {
animation: rotate-scale-down-diag-1 4s linear infinite both;
}
@keyframes rotate-scale-down-diag-1 {
0% {
-webkit-transform: scale(1) rotate3d(1, 1, 0, 0deg);
transform: scale(1) rotate3d(1, 1, 0, 0deg);
}
50% {
-webkit-transform: scale(0.5) rotate3d(1, 1, 0, -180deg);
transform: scale(0.5) rotate3d(1, 1, 0, -180deg);
}
100% {
-webkit-transform: scale(1) rotate3d(1, 1, 0, -360deg);
transform: scale(1) rotate3d(1, 1, 0, -360deg);
}
}
</style>
Rotation + taille
<style>
#img {
animation: rotate-scale-down-hor 4s linear infinite both;
}
@keyframes rotate-scale-down-hor {
0% {
-webkit-transform: scale(1) rotateX(0);
transform: scale(1) rotateX(0);
}
50% {
-webkit-transform: scale(0.5) rotateX(-180deg);
transform: scale(0.5) rotateX(-180deg);
}
100% {
-webkit-transform: scale(1) rotateX(-360deg);
transform: scale(1) rotateX(-360deg);
}
}
</style>
Rotation + taille
<style>
#img {
animation: rotate-scale-down-diag-2 3s linear infinite both;
}
@keyframes rotate-scale-down-diag-2 {
0% {
-webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
transform: scale(1) rotate3d(-1, 1, 0, 0deg);
}
50% {
-webkit-transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
}
100% {
-webkit-transform: scale(1) rotate3d(-1, 1, 0, 360deg);
transform: scale(1) rotate3d(-1, 1, 0, 360deg);
}
}
</style>
Déplaclmt vertical
<style>
#img {
animation: slide-top 4s linear infinite alternate both;
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
</style>
Déplclmt horizontal
<style>
#img {
animation: slide-left 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
}
</style>
Déplaclmt diagonal
<style>
#img {
animation: slide-tl 2s linear infinite alternate both;
}
@keyframes slide-tl {
0% {
-webkit-transform: translateY(0) translateX(0);
transform: translateY(0) translateX(0);
}
100% {
-webkit-transform: translateY(-100px) translateX(-100px);
transform: translateY(-100px) translateX(-100px);
}
}
</style>
Apparition ombre
<style>
#img {
animation: shadow-drop-center 1s linear infinite alternate both;
}
@keyframes shadow-drop-center {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
}
</style>
Slide ombre
<style>
#img {
animation: shadow-pop-tr 1s linear infinite alternate both;
}
@keyframes shadow-pop-tr {
0% {
box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
transform: translateX(0) translateY(0);
}
100% {
box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
transform: translateX(-8px) translateY(8px);
}
}
</style>
Applati avant
<style>
#img {
animation: slide-rotate-hor-b-fwd 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate both;
}
@keyframes slide-rotate-hor-b-fwd {
0% {
-webkit-transform: translateY(0) translateZ(0) rotateX(0deg);
transform: translateY(0) translateZ(0) rotateX(0deg);
-webkit-transform-origin: top center;
transform-origin: top center;
}
100% {
-webkit-transform: translateY(150px) translateZ(130px) rotateX(90deg);
transform: translateY(150px) translateZ(130px) rotateX(90deg);
-webkit-transform-origin: top center;
transform-origin: top center;
}
}
</style>
Pliage
<style>
#img {
animation: myAnim2 1s ease 0s infinite alternate forwards;
}
@keyframes myAnim2 { 0% { transform: scaleX(0.4); } 100% { transform: scaleX(1); } }
</style>
Mouvement gauche
<style>
#img {
animation: myAnim3 1s ease 0s infinite alternate forwards;
}
@keyframes myAnim3 { 0% { transform: scaleX(0.4); transform-origin: 0% 0%; } 100% { transform: scaleX(1); transform-origin: 0% 0%; } }
</style>
Mouvement droite
<style>
#img {
animation: myAnim4 1s ease 0s infinite alternate forwards;
}
@keyframes myAnim4 { 0% { transform: scaleX(0.4); transform-origin: 100% 100%; } 100% { transform: scaleX(1); transform-origin: 100% 100%; } }
</style>
Rota drt/gch
<style>
#img {
animation: myAnim5 1s ease 0s infinite alternate forwards;
}
@keyframes myAnim5 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
</style>
Ombre gauche
<style>
#img {
animation: myAnim6 1s ease 0s infinite alternate forwards;
}
@keyframes myAnim6 { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 100% { box-shadow: -40px 0 40px -10px rgba(0, 0, 0, 0.7);
} }
</style>
Ombre centre
<style>
#img {
animation: myAnim7 1s ease 0s infinite alternate forwards;
}
@keyframes myAnim7 { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transform: scale(1); } 100% { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35); transform: scale(1.1); } }
</style>
Les Animations de bouton
<style>
button {
background: rgb(47,203,253);
background: linear-gradient(90deg, rgba(47,203,253,1) 0%, rgba(79,85,246,1) 100%);
}
</style>
<style>
button { margin-top: 0px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
button:hover { margin-top: -10px; margin-bottom: 10px;}
</style>
<style>
button{
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #23c483;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
}
button:active {
transform: translateY(-1px);
}
</style>
<style>
button {
border: unset;
z-index: 1;
position: relative;
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms;
overflow: hidden;
}
button::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #212121;
z-index: -1;
box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
transition: all 250ms
}
button:hover {
color: #e8e8e8;
}
button:hover::before {
width: 100%;
}
</style>
<style>
button {
--green: #1BFD9C;
position: relative;
overflow: hidden;
transition: all 0.3s;
border: 2px solid var(--green);
background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%);
color: var(--green);
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
}
button:hover {
color: #82ffc9;
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
}
button:before {
content: "";
position: absolute;
left: -4em;
width: 4em;
height: 100%;
top: 0;
transition: transform .4s ease-in-out;
background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%);
}
button:hover:before {
transform: translateX(15em);
}
</style>
<style>
button {
border: 3px solid #fa725a;
transition: ease-in-out 0.3s;
background-color: transparent;
}
button:hover {
transform: scale(1.1) rotate(10deg);
background-color: #fa725a;
color: white;
}
</style>
<style>
button {
border: none;
transition: .3s;
}
button:hover {
background-color: #3b82f6;
box-shadow: 0 0 0 5px #3b83f65f;
color: #fff;
}
</style>
<style>
button {
cursor: pointer;
position: relative;
border: none;
background: none;
text-transform: uppercase;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
transition-property: color;
}
button:focus,
button:hover {
color: #000000;
}
button:focus:after,
button:hover:after {
width: 100%;
left: 0%;
}
button:after {
content: "";
pointer-events: none;
bottom: -2px;
left: 50%;
position: absolute;
width: 0%;
height: 2px;
background-color: #000000;
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
transition-duration: 400ms;
transition-property: width, left;
}
</style>