Animationعند تحريك الرابط بـ CSS

رسوم متحركة دقيقة عند تحريك الرابط بـ CSS

مجموعة من تأثيرات التحويم (Hover) الدقيقة في CSS

هنا نعرض مجموعة متنوعة من تأثيرات التحويم الدقيقة التي تنفذ عند تمرير المؤشر على الروابط باستخدام CSS فقط. يتم إنشاء تأثير التسطير للروابط أو الكلمات المفتاحية بطريقة أنيقة ودقيقة بدلاً من التسطير التقليدي السميك، مما يجعلها مناسبة لأي موقع أو منتدى.

لماذا نستخدم هذه التأثيرات الدقيقة؟

تعزيز المظهر الجمالي للموقع
إضفاء لمسة من الأصالة والتميز
إبراز العبارات والروابط المهمة
تحسين تجربة المستخدم وتوضيح العناصر القابلة للنقر
الحفاظ على انسجام التصميم العام للموقع

كيفية الاستخدام

يمكن تطبيق هذه التأثيرات على:

تسطير الروابط
العناوين الرئيسية
الكلمات المفتاحية

يوجد صفحة تجريبية يمكنك من خلالها معاينة كيفية عمل هذه التأثيرات واختيار النمط الذي يناسبك، حيث تم ترقيم كل تأثير لتسهيل عملية الاختيار.

شرح كود تأثيرات التحويم (Hover Effects) للروابط

الهيكل الأساسي (HTML)

<div class="wrapper tabled">
  <div class="stage" id="page1">
    <div class="middled">
      <h5>Subtle link:hover animations.</h5>
      <h4>mix & match!</h4>
      
      <!-- 7 أنواع مختلفة من تأثيرات الروابط -->
      <div class="link-1">...</div>
      <div class="link-2">...</div>
      ...
      <div class="link-7">...</div>
    </div>
  </div>
</div>

التنسيقات الأساسية (CSS)

خلفية داكنة (#2d2d2d)
استخدام خط Lato بسمكات مختلفة
تنظيم العناصر في منتصف الصفحة
تنسيقات الروابط الأساسية:
- حجم خط 36px
- لون أبيض
- بدون تزيين نص
- تحويل النص لأحرف كبيرة

تأثيرات التحويم المختلفة

الرابط الأول (link-1):
تأثير تسطير ينزلق من الجانبين عند التحويم
الرابط الثاني (link-2):
تغيير لون النص إلى أزرق وظهور خط تسطير
الرابط الثالث (link-3):
تكبير سمك خط التسطير عند التحويم
الرابط الرابع (link-4):
تغيير لون خط التسطير من الأبيض إلى الأزرق
الرابط الخامس (link-5):
مزيج من التأثيرين الثالث والرابع
الرابط السادس (link-6):
تكبير حجم النص قليلاً عند التحويم
الرابط السابع (link-7):
تأثير نبض القلب مع خط أحمر

ملاحظات مهمة

جميع التأثيرات تستخدم CSS فقط
التأثيرات مصممة لتكون دقيقة وغير مزعجة
يمكن دمج هذه التأثيرات مع بعضها
الكود متجاوب مع جميع أحجام الشاشات

هذه التأثيرات مفيدة لتحسين تجربة المستخدم وإضافة لمسة تفاعلية جميلة لروابط الموقع.

الكود كاملا


<div class="wrapper tabled">
  <div class="stage" id="page1">
    <div class="middled">

      <h2>Subtle link:hover animations.</h2>
      <h4>mix & match!</h4>
      <div class="link-1">
        <a href="#">
          <span class="thin">link</span><span class="thick">one</span>
        </a>
        <p>underline slide</p>    
      </div>
      
      <div class="link-2">
        <a href="#">
          <span class="thin">link</span><span class="thick">two</span>
        </a>
        <p>light color change</p>    
      </div>
      
      <div class="link-3">
        <a href="#">
          <span class="thin">link</span><span class="thick">three</span>
        </a>
        <p>fat underline</p>    
      </div>

      <div class="link-4">
        <a href="#">
          <span class="thin">link</span><span class="thick">four</span>
        </a>
        <p>underline color change</p>    
      </div>

      <div class="link-5">
        <a href="#">
          <span class="thin">link</span><span class="thick">five</span>
        </a>
        <p>three + four</p>    
      </div>

      <div class="link-6">
        <a href="#">
          <span class="thin">link</span><span class="thick">six</span>
        </a>
        <p>minor scale up</p>    
      </div>

      <div class="link-7">
        <a href="#">
          <span class="thin">link</span><span class="thick">seven</span>
        </a>
        <p>heartbeat</p>    
      </div>
    </div>
 
  </div>
</div>


    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,900);

html, body {
  height: 100%;
  margin: 0;
  font-family: Lato;
  color: white;
}

#page1 { background: #2d2d2d; }

.wrapper {
  display: table;
  height: 100%; width: 100%;
}

.stage {
  display: table-cell;
  vertical-align: middle;
}

.tabled, .middled {
  text-align: center;
  margin: 0 auto;
}

.thin { font-weight: 300; }
.thick { font-weight: 900; }

a {
  text-transform: uppercase;
  font-size: 36px;
  color: white;
  text-decoration: none;
  position: relative;
  display: block;
}

p {
  font-weight: 100;
  font-size: 80%;
  margin: 1px;
}

[class^="link-"] {
  display: inline-block;
  margin: 2em
}

/* linkone */
.link-1 a:before, .link-1 a:after {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0;
  width: 0;
}

.link-1 a:before { left: 0; }
.link-1 a:after { right: 0; }

.link-1 a:hover:before, .link-1 a:hover:after {
  width: 50%;
}

.link-1 a:before, .link-1 a:after {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

/* linktwo */
.link-2 a:hover {
  color: #5CAAEF;
}

.link-2 a:before {
  content: '';
  border-bottom: solid 1px #5CAAEF;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  
  opacity: 0;
}

.link-2 a:hover:before {
  opacity: 1.0;
}

.link-2 a, .link-2 a:before {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

/* linkthree */
.link-3 a:before {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.link-3 a:hover:before {
  -webkit-transform: scaleY(4);
     -moz-transform: scaleY(4);
      -ms-transform: scaleY(4);
       -o-transform: scaleY(4);
          transform: scaleY(4);
}

.link-3 a:before {
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

/* linkfour */
.link-4 a:before {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.link-4 a:hover:before {
  border-bottom: solid thin #5CAAEF;
}

.link-4 a:before {
  -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;
}

/* linkfive */
.link-5 a:before {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.link-5 a:hover:before {
  -webkit-transform: scaleY(4);
     -moz-transform: scaleY(4);
      -ms-transform: scaleY(4);
       -o-transform: scaleY(4);
          transform: scaleY(4);
  border-bottom: solid thin #5CAAEF;
}

.link-5 a:before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* linksix */
.link-6 a:hover {
  -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
       -o-transform: scale(1.05);
          transform: scale(1.05);  
}

.link-6 a {
  -webkit-transition: all 0.1s linear;
          transition: all 0.1s linear;
}

/* linkseven */
.link-7 a:before {
  content: '';
  border-bottom: solid 1px #d9534f;
  position: absolute;
  bottom: 0; left: 30%;
  width: 0;
  -webkit-transform: scale(0);
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0);
          transform: scale(0); 
}

.link-7 a:hover:before {
  border-bottom: solid thin #d9534f;
  width: 40%;
  -webkit-animation: heartbeat-x 1.7s infinite ease-in;
          animation: heartbeat-x 1.7s infinite ease-in;
}

.link-7 a:hover {
  -webkit-animation: heartbeat 1.7s infinite ease-in;
          animation: heartbeat 1.7s infinite ease-in;
}

@-webkit-keyframes heartbeat {
  0% { -webkit-transform: scale(1); }
  10% { -webkit-transform: scale(1.1); }
  20% { -webkit-transform: scale(1); }
  30% { -webkit-transform: scale(1.1); }
  40% { -webkit-transform: scale(1); }
}

@-webkit-keyframes heartbeat-x {
  0% { -webkit-transform: scaleX(0); }
  10% { -webkit-transform: scaleX(1); }
  20% { -webkit-transform: scaleX(0); }
  30% { -webkit-transform: scaleX(1); }
  40% { -webkit-transform: scaleX(0); }
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.1); }
  20% { transform: scale(1); }
  30% { transform: scale(1.1); }
  40% { transform: scale(1); }
}

@keyframes heartbeat-x {
  0% { transform: scaleX(0); }
  10% { transform: scaleX(1); }
  20% { transform: scaleX(0); }
  30% { transform: scaleX(1); }
  40% { transform: scaleX(0); }
}

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

Animationعند تحريك الرابط بـ CSS

مجموعة من تأثيرات التحويم (Hover) الدقيقة في CSS

لماذا نستخدم هذه التأثيرات الدقيقة؟

كيفية الاستخدام

شرح كود تأثيرات التحويم (Hover Effects) للروابط

الهيكل الأساسي (HTML)

التنسيقات الأساسية (CSS)

تأثيرات التحويم المختلفة

ملاحظات مهمة

الكود كاملا

معاينة

كيف كان المقال؟

إرسال تعليق

الدردشة عبر واتساب

إرسال طلب

مجموعة شاملة لتصاميم العناوين باستخدام CSS

هل يمكن منع الزوار من فحص مصدر موقعك؟ اكتشف الحل الآن

انشاء صفحة أداة تحويل الأكواد الى مدونة بلوجر

تركيب محرر النصوص البرمجية CodeMirror علي مدونتك

إنشاء زر تنزيل جميل ومثير للإعجاب على بلوجر