كس 3 الرسوم المتحركة العمودي

Question

أريد استخدام هذا الرمز ، ولكن أريد الرسوم المتحركة يذهب الرأسي.

header {
    width: 100%;
    height: 150px;
    background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
    background-position: 0px;
    background-repeat: repeat-x;
    -webkit-animation: myanim 5s infinite linear;
       -moz-animation: myanim 5s infinite linear;
         -o-animation: myanim 5s infinite linear;
            animation: myanim 5s infinite linear;
}

@-webkit-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}

لقد وجدت هذا الرمز هنا : http://jsfiddle.net/e3WLD/3/

شكرا للمساعدة

Answer 1

موقف الخلفية يقبل 2 المعلمات:

• أول واحد لتحديد المواقع الأفقية
• والثاني لتحديد المواقع الرأسية

href="http://www.w3schools.com/cssref/pr_background-position.asp" rel="nofollow"> مزيد من المعلومات حول موقف الخلفية على W3Schools

حتى بإضافة المعلمة الثانية إلى خاصية موضع الخلفية، يمكنك تحريك خلفيتك عموديا.

قمت بتحرير jsfiddle

إلى هذا:

giveacodicetagpre.

Answer 2

أنا قادر على فعل رأسية عن طريق تحويل العنصر 90 درجة.

giveacodicetagpre.

عمل الكم

Answer 3

أنت فقط إعداد وتنشيط واحدة من قيم وضع الخلفية، لذا افترض أن تتم مراجعتها إلى أول واحد (X-موضع) والمناطق الافتراضية الأخرى إلى تلقائية (أعتقد).

جرب هذا

** jsfiddle التجريبي **

css

giveacodicetagpre.

Answer 4

إذا كنت ترغب في تعيينها لتدوير عموديا مثل هذا: http://jsfiddle.net/jme11/AYKC2/

ثم تحتاج إلى ضبط التكرار على repeat-y وتغيير موضع الخلفية لتتناسب مع ارتفاع العنصر:

@keyframes myanim {
  0%   { background-position: 0px 0px; }
  100% { background-position: 0px 131px; } /* set this to the height of the image */
}