كس 3 الرسوم المتحركة العمودي
سؤال
أريد استخدام هذا الرمز ، ولكن أريد الرسوم المتحركة يذهب الرأسي.
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/
شكرا للمساعدة
المحلول
موقف الخلفية يقبل 2 المعلمات:
- أول واحد لتحديد المواقع الأفقية
- والثاني لتحديد المواقع الرأسية
href="http://www.w3schools.com/cssref/pr_background-position.asp" rel="nofollow"> مزيد من المعلومات حول موقف الخلفية على W3Schools
حتى بإضافة المعلمة الثانية إلى خاصية موضع الخلفية، يمكنك تحريك خلفيتك عموديا.
قمت بتحرير jsfiddle
إلى هذا:
giveacodicetagpre.نصائح أخرى
أنت فقط إعداد وتنشيط واحدة من قيم وضع الخلفية، لذا افترض أن تتم مراجعتها إلى أول واحد (X-موضع) والمناطق الافتراضية الأخرى إلى تلقائية (أعتقد).
جرب هذا
css
giveacodicetagpre.إذا كنت ترغب في تعيينها لتدوير عموديا مثل هذا: 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 */
}