שלום כולם, אחרי כמה בקשות מחברים החלטתי לעשות סדרת מדריכי CSS של אפקטים מגניבים,
אפקים של CSS נראים טוב וממש מוסיפים חיים לאתר שלנו.

במדריך הזה אני אלמד אתכם כמה אנימציות נחמדות שמשמשות אותי בעבודה.

אפקט ראשון – תמונה מסתובבת במעבר עכבר

רוצים לבנות אזור לקוחות או פורטפוליו מגניב לאתר שלכם או של לקוח?

דוגמא זה התוצר הסופי

רוצים לדעת איך עשיתי את זה ?
להלן הקודים:

ראשון קוד ה- HTML שנשים בדף:

<div class="card-container">
  <div class="card">
    <div class="side"><img src="opus.png" alt="אתר אופוס"></div>
    <div class="side back"><a href="http://opus-projects.co.il" target="_blank">למעבר לאתר</a></div>
  </div>
</div>

חלק שני, קוד ה- CSS שנשתול ב- Style.css:

.card-container {
  cursor: pointer;
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.card .back {
  background: #eaeaed;
  color: #0087cc;
  line-height: 150px;
  text-align: center;
  transform: rotateY(180deg);
}

כמובן שניתן לשחק עם ההגדרות על מנת לשנות צבעים גדלים וכו…


אפקט שני – החלפת צבע במעבר עכבר

דוגמא:

Box

איך עשיתי את זה?

זה ממש פשוט, זה קוד ה- HTML לשתול בעמוד הרלוונטי:

<div class="box">Box</div>

וזה הקוד ל- CSS

.box {
  background: #2db34a;
  border-radius: 6px;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  width: 95px;
}
.box:hover {
  background: #ff7b29;
}

כמובן שגם כאן אתם מוזמנים לשנות את הצבעים כדי שיתאים לכם יותר.


אפקט שלישי – אותו ריבוע מלמעלה אבל שגם הופך לעיגול תוך כדי החלפת צבע

Box

קוד HTML

<div class="box">Box</div>

קוד CSS

.box {
  background: #2db34a;
  border-radius: 6px;
  cursor: pointer;
  height: 95px;
  line-height: 95px;
  text-align: center;
  transition-property: background, border-radius;
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
  width: 95px;
}
.box:hover {
  background: #ff7b29;
  border-radius: 50%;
}

אפקט רביעי – כפתור מגניב תלת מימדי שמגיב ללחיצת כפתור

קודם כל קוד ה- HTML

<button>תלחצו עלי</button>

ועכשיו לקוד CSS

button {
  border: 0;
  background: #0087cc;
  border-radius: 4px;
  box-shadow: 0 5px 0 #006599;
  color: #fff;
  cursor: pointer;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 12px 20px;
  transition: all .1s linear;
}
button:active {
  box-shadow: 0 2px 0 #006599;
  transform: translateY(3px);
}

אפקט חמישי – ריחוף או עליה וירידה תמידית של אלמנט באתר

אנימציה זו טובה להשגת תשומת לב לדוגמה כותרת או מספר טלפון באתר שלנו

תתקשרו אלינו

קוד HTML

<h1 class="floating-title">תתקשרו אלינו</h1>

קוד CSS

.floating-title{
    animation-name: float;
    -webkit-animation-name: float;
 
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
 
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
 
@keyframes float {
    0% {transform: translateY(0%);}
    50% {transform: translateY(30%);}
    100% {transform: translateY(0%);}  
}
 
@-webkit-keyframes float {
    0% {-webkit-transform: translateY(0%);}
    50% {-webkit-transform: translateY(30%);}       
    100% {-webkit-transform: translateY(0%);}          
}

זה הכל להפעם, בואו נשאיר לכם טעם של עוד, הרי אנחנו רוצים שתחזרו לכאן…
יום נפלא

תגובות

הגיבו

אין תגובות

השאירו תגובה

thirteen − 8 =