it-swarm.dev

CSS: CSS نقية للتمرير الرسوم المتحركة

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

لقد وجدت هذا البرنامج التعليمي: http://tympanus.net/codrops/2012/06/12/css-only- Responseive-layout-with-smooth-transitions/

العرض التوضيحي: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/

لكنه متقدم بعض الشيء بالنسبة لاحتياجاتي لأنني أريد فقط أن ينتقل المستعرض لأسفل بنقرة واحدة على أعلى الصفحة ، لذلك كنت أتساءل: هل من الممكن القيام بتمرير CSS بدون أزرار الإدخال ، فقط مع علامة مرساة؟

يشبه HTML هذا: <a href="#" class="button">Learn more</a>

لدي بالفعل بعض CSS التي أحتاج إلى تشغيلها على زر النقر:

/* Button animation tryout. */
.animate {
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}
71
blameless75

يمكنك القيام بذلك باستخدام علامات الربط باستخدام css3 :target-pseudo-selector ، سيتم تشغيل هذا المحدد عندما يتطابق العنصر الذي يحمل نفس المعرف مثل تجزئة عنوان URL الحالي. مثال

مع العلم بذلك ، يمكننا دمج هذه التقنية مع استخدام محددات القرب مثل "+" و "~" لتحديد أي عنصر آخر من خلال العنصر الهدف الذي تتطابق معرفه مع تجزئة عنوان url الحالي. مثال على ذلك سيكون مثل ما أنت تسأل .

84
Jesus Bejarano

حسنًا ، إذا كنت لا تمانع لا تدعم جميع المتصفحات الرئيسية (فقط Firefox 36+ و Chrome 61+ و Opera 48+) ، فاستخدم روابط الربط وهذه الخاصية الفردية لحاوية التمرير:

scroll-behavior: smooth;

راجع مرجع MDN .

استخدمه مثل هذا:

<head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body>

إليك Fiddle .

وهنا أيضًا Fiddle مع كل من التمرير الأفقي والرأسي.

96
Felix Edelmann