אפקטים! אני אוהב את זה… היום, כמה אפקטים מעולים שיעזרו לכם להפוך את הקישורים באתר שלכם או אולי ברשימה של קישורים לחתיכיים יותר ואלגנטיים יותר. המדריך בנוי בצורה של דוגמה, קוד פלוס הסבר.
אני יודע שמדובר בנושא קצת סבוך עבור חלק מכם אז אל תתקמצנו בשאלות, תגובות, בקשות למידע נוסף כיוון שאנו נשמח לעזור. בנוסף ולנושאים פרטניים אתם מוזמנים לבקר בשאלות ותשובות כדי לקבל תשובה עניינית לשאלה שמעניינת אתכם.
סיימנו עם מנות הפתיחה – קדימה לעניינים!
שלוש עשרה אפקטים לא מוגזמים לאתרים אמיתיים!
קוד הרשימה:
<div class="floatfx"> <ul> <li><a href="#">פריט 1</a></li> <li><a href="#">פריט 2</a></li> <li><a href="#">פריט 3</a></li> <li><a href="#">פריט 4</a></li> <li><a href="#">פריט 5</a></li> <li><a href="#">פריט 6</a></li> </ul> </div>
הCSS בו השתמשתי:
.floatfx ul li {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.floatfx ul li:hover, .floatfx ul li:focus, .floatfx ul li:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
קוד הרשימה:
<div class="growRotate"> <ul> <li><a href="#">פריט 1</a></li> <li><a href="#">פריט 2</a></li> <li><a href="#">פריט 3</a></li> <li><a href="#">פריט 4</a></li> <li><a href="#">פריט 5</a></li> </ul> </div>
הCSS בו השתמשתי:
/* GROW ROTATE FX */
.growRotate ul il a {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.growRotate ul il a:hover, .growRotate ul il a:focus, .growRotate ul il a:active {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
קוד הרשימה:
<div class="buzzOutFx"> <ul> <li><a href="#">פריט 1</a></li> <li><a href="#">פריט 2</a></li> <li><a href="#">פריט 3</a></li> <li><a href="#">פריט 4</a></li> <li><a href="#">פריט 5</a></li> </ul> </div>
הCSS בו השתמשתי:
@-webkit-keyframes buzzOutFx{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0);}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0);}}
@keyframes buzzOutFx{10%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}20%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}30%{-webkit-transform:translateX(3px) rotate(2deg);transform:translateX(3px) rotate(2deg);}40%{-webkit-transform:translateX(-3px) rotate(-2deg);transform:translateX(-3px) rotate(-2deg);}50%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}60%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}70%{-webkit-transform:translateX(2px) rotate(1deg);transform:translateX(2px) rotate(1deg);}80%{-webkit-transform:translateX(-2px) rotate(-1deg);transform:translateX(-2px) rotate(-1deg);}90%{-webkit-transform:translateX(1px) rotate(0);transform:translateX(1px) rotate(0);}100%{-webkit-transform:translateX(-1px) rotate(0);transform:translateX(-1px) rotate(0);}}
.buzzOutFx ul li{-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);}
.buzzOutFx ul li:hover, .buzzOutFx ul li:focus, .buzzOutFx ul li:active{-webkit-animation-name:buzzOutFx;animation-name:buzzOutFx;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;}
קוד הרשימה:
<div class="pushfx"> <ul> <li><a href="#">פריט 1</a></li> <li><a href="#">פריט 2</a></li> <li><a href="#">פריט 3</a></li> <li><a href="#">פריט 4</a></li> <li><a href="#">פריט 5</a></li> </ul> </div>
הCSS בו השתמשתי:
@-webkit-keyframes pushfx{50%{-webkit-transform:scale(0.8);transform:scale(0.8);}100%{-webkit-transform:scale(1);transform:scale(1);}}@keyframes pushfx{50%{-webkit-transform:scale(0.8);transform:scale(0.8);}100%{-webkit-transform:scale(1);transform:scale(1);}}
.pushfx ul li a {display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.pushfx ul li a:hover, .pushfx ul li a:focus, .pushfx ul li a:active {-webkit-animation-name: pushfx; animation-name: pushfx; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}
קוד הרשימה:
<div class="linesout"> <ul> <li><a href="#">פריט 1</a></li> <li><a href="#">פריט 2</a></li> <li><a href="#">פריט 3</a></li> <li><a href="#">פריט 4</a></li> <li><a href="#">פריט 5</a></li> </ul> </div>
הCSS בו השתמשתי:
.linesout ul li a::before, .linesout ul li a::after {display: inline-block;opacity: 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;-moz-transition: -moz-transform 0.3s, opacity 0.2s;transition: transform 0.3s, opacity 0.2s;}
.linesout ul li a::before{margin-right:10px;content:'[';-webkit-transform:translateX(20px);-moz-transform:translateX(20px);transform:translateX(20px);}
.linesout ul li a::after{margin-left:10px;content:']';-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);transform:translateX(-20px);}
.linesout ul li a:hover::before,.linesout ul li a:hover::after,.linesout ul li a:focus::before,.linesout ul li a:focus::after{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px);}
קוד הרשימה:
<div class="rollup3d"> <ul> <li><a href="#"><span data-hover="פריט 1">פריט 1</span></a></li> <li><a href="#"><span data-hover="פריט 2">פריט 2</span></a></li> <li><a href="#"><span data-hover="פריט 3">פריט 3</span></a></li> <li><a href="#"><span data-hover="פריט 4">פריט 4</span></a></li> <li><a href="#"><span data-hover="פריט 5">פריט 5</span></a></li> <li><a href="#"><span data-hover="פריט 6">פריט 6</span></a></li> </ul> </div>
הCSS בו השתמשתי:
.rollup3d ul li a{line-height:22px;text-align: center;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;}
.rollup3d ul li a span{position:relative;display:inline-block;padding:0 14px;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}
.rollup3d ul li a span::before{position:absolute;top:100%;left:0;width:100%;height:100%;background:#0965a0;content:attr(data-hover);-webkit-transition:background 0.3s;-moz-transition:background 0.3s;transition:background 0.3s;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0;}
.rollup3d ul li a:hover span,.rollup3d ul li a:focus span{color: #fff !important; -webkit-transform:rotateX(90deg) translateY(-22px);-moz-transform:rotateX(90deg) translateY(-22px);transform:rotateX(90deg) translateY(-22px);}
.rollup3d ul li a:hover span::before,.rollup3d ul li a:focus span::before{background:#28a2ee;}
קוד הרשימה:
<div class="simpleBg"> <ul> <li><a href="#">פריט א</a></li> <li><a href="#">פריט ב</a></li> <li><a href="#">פריט ג</a></li> <li><a href="#">פריט ד</a></li> <li><a href="#">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.simpleBg ul li a {background: none; padding: 0 5px;}
.simpleBg ul li a:hover {background: #5CB85C; color: #fff; text-decoration: none; -webkit-transition: background-color .5ms linear; -moz-transition: background-color .5ms linear; -o-transition: background-color .5ms linear; -ms-transition: background-color .5ms linear; transition: background-color .5ms linear;}
קוד הרשימה:
<div class="bgMove"> <ul> <li><a href="#">פריט א</a></li> <li><a href="#">פריט ב</a></li> <li><a href="#">פריט ג</a></li> <li><a href="#">פריט ד</a></li> <li><a href="#">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.bgMove ul li {background-image: linear-gradient(to left, #428BCA, #428BCA 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); background-position: 0 100%; background-size: 200% 100%; transition: all .2s ease-in;}
.bgMove ul li:hover {background-position: 100% 0;}
.bgMove ul li:hover a {color: #fff; text-decoration: none; -webkit-transition: color .3s ease-in; -moz-transition: color .3s ease-in;-o-transition: color .3s ease-in;-ms-transition: color .3s ease-in;transition: color .3s ease-in;}
קוד הרשימה:
<div class="txtshadow"> <ul> <li><a href="#">פריט א</a></li> <li><a href="#">פריט ב</a></li> <li><a href="#">פריט ג</a></li> <li><a href="#">פריט ד</a></li> <li><a href="#">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.txtshadow ul li a{color: #000 !important;}
.txtshadow ul li a:hover{color: #000; text-shadow: 2px 2px 7px #000000; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in;-o-transition: all .5s ease-in;-ms-transition: all .5s ease-in;transition: all .5s ease-in;}
אלמנט מקבל גבול ימני צבעוני
קוד הרשימה:
<div class="slidewBorder"> <ul> <li><a href="#">פריט א</a></li> <li><a href="#">פריט ב</a></li> <li><a href="#">פריט ג</a></li> <li><a href="#">פריט ד</a></li> <li><a href="#">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.slidewBorder ul {padding: 0 15px;}
.slidewBorder ul li a {border-right: 0px solid #F05A49; transition-property: border-width, padding; transition-duration: .2s;transition-timing-function: linear;}
.slidewBorder ul li a:hover {border-right: 10px solid #35BC7A; padding: 0 7px 0 0;}
קוד הרשימה:
<div class="growUnderLine"> <ul> <li><a href="#">פריט א</a></li> <li><a href="#">פריט ב</a></li> <li><a href="#">פריט ג</a></li> <li><a href="#">פריט ד</a></li> <li><a href="#">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.growUnderLine ul li a {position: relative;display: inline-block;outline: none;color: #fff;text-decoration: none;font-weight: 400;text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);}
.growUnderLine ul li a::after {display: block;margin: 0 auto;margin-top: 0;width: 0;height: 3px;background-color: #fff;content: '';opacity: 0;-webkit-transition: width 0.3s, opacity 0.6s;-moz-transition: width 0.3s, opacity 0.6s;transition: width 0.3s, opacity 0.6s;}
.growUnderLine ul li a:hover {outline: none;}
.growUnderLine ul li a:hover::after, .growUnderLine ul li a:focus::after {opacity: 1;width: 100%;}
קוד הרשימה:
<div class="apearSecondText"> <ul> <li><a href="#" data-text="פריט א">פריט א</a></li> <li><a href="#" data-text="פריט ב">פריט ב</a></li> <li><a href="#" data-text="פריט ג">פריט ג</a></li> <li><a href="#" data-text="פריט ד">פריט ד</a></li> <li><a href="#" data-text="פריט ה">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.apearSecondText ul li a {position: relative;display: inline-block;outline: none;color: #222;text-decoration: none;text-transform: uppercase; font-weight: 400;text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);font-size: 1.2em;}
.apearSecondText ul li a::after {display: block;position: absolute;}
.apearSecondText ul li a::after {color: #F05A49; width: 100%; height: 100%; content: attr(data-text); opacity: 0; -webkit-transition: -webkit-transform 0.3s cubic-bezier(1.000, -0.530, 0.405, 1.425); -moz-transition: -moz-transform 0.3s cubic-bezier(1.000, -0.530, 0.405, 1.425); transition: transform 0.3s cubic-bezier(1.000, -0.530, 0.405, 1.425);}
.apearSecondText ul li a:hover::after, .apearSecondText ul li a:focus::after {opacity: 1;-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}
קוד הרשימה:
<div class="apearSecondText"> <ul> <li><a href="#" data-text="פריט א">פריט א</a></li> <li><a href="#" data-text="פריט ב">פריט ב</a></li> <li><a href="#" data-text="פריט ג">פריט ג</a></li> <li><a href="#" data-text="פריט ד">פריט ד</a></li> <li><a href="#" data-text="פריט ה">פריט ה</a></li> </ul> </div>
הCSS בו השתמשתי:
.apearSecondText ul li a {position: relative;display: inline-block;outline: none;color: #222;text-decoration: none;text-transform: uppercase; font-weight: 400;text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);font-size: 1.2em;}
.apearSecondText ul li a::after {display: block;position: absolute;}
.apearSecondText ul li a::after {color: #F05A49; width: 100%; height: 100%; content: attr(data-text); opacity: 0; -webkit-transition: -webkit-transform 0.3s cubic-bezier(1.000, -0.530, 0.405, 1.425); -moz-transition: -moz-transform 0.3s cubic-bezier(1.000, -0.530, 0.405, 1.425); transition: transform 0.3s cubic-bezier(1.000, -0.530, 0.405, 1.425);}
.apearSecondText ul li a:hover::after, .apearSecondText ul li a:focus::after {opacity: 1;-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}
יש לכם רעיון לאפקט? ספרו לנו בעזרת תגובה ואל תשכחו לפרגן עם לייק או מילה חמה
אני מקווה שמצאתם את המדריך לשימושי ומועיל. אתם יותר ממוזמנים להשאיר תגובות, לחלוק איתנו אפקטים משלכם, לשאול שאלות, לפרגן ולשתף. אם אהבתם אתם מוזמנים להרשם לרשימת התפוצה שלנו ותקבלו עדכון חודשי מרוכז על כל המדריכים השווים שהספקנו לפרסם.
10 תגובות