אנימציית הבהוב לכפתור

אנימציית הבהוב לכפתור

להעתיק את הקוד הזה ולשים אותו ב CSS מותאם של הא...
להעתיק את הקוד הזה ולשים אותו ב CSS מותאם של האלמנט שאתם רוצים שיהבהב

@-webkit-keyframes pulseBox {
  0% {-webkit-box-shadow: 0px 0px 10px 0px #37E0BF;}
  100% {-webkit-box-shadow: 0px 0px 18px 0px #37E0BF;}
}
@-moz-keyframes pulseBox {
  0% {-moz-box-shadow: 0px 0px 10px 0px #37E0BF;}
  100% {-moz-box-shadow: 0px 0px 18px 0px #37E0BF;}
}
@-o-keyframes pulseBox {
  0% {-o-box-shadow: 0px 0px 10px 0px #37E0BF;}
  100% {-o-box-shadow: 0px 0px 18px 0px #37E0BF;}
}
@keyframes pulseBox {
  0% {box-shadow: 0px 0px 10px 0px #37E0BF00; border: 1px solid #8A8787;}
  100% {box-shadow: 0px 0px 18px 0px #FFD570;border: 1px solid #FFD570;}
}

selector {
  -webkit-animation-name: pulseBox;
  -moz-animation-name: pulseBox;
  -o-animation-name: pulseBox;
  animation-name: pulseBox;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  border-radius: 30px;
background: linear-gradient(145deg, #2a2d32, #32363b) !important;
  border: 1px solid #37E0BF;
}Code language: CSS (css)

אפשרי עם שינוי או הוספה של בורדר רדיוס לשנות את המבנה של האלמנט

לקישור חיצוני >>

נשמח לקבל תכנים נוספים שלדעתכם יכולים לעניין את קהל היעד

פרטי יצירת קשר
דילוג לתוכן