- إنضم
- 6 مارس 2015
- المشاركات
- 1,117
- مستوى التفاعل
- 1,533
- النقاط
- 1,220
غير متصل
اليوم جبتلكم كود لصفحة html
هذا الكود يصفة عامة فائدته هوجعل صور متتالية لفارس والحصان تتحرك بسرعة محددة
مما يجعل الحصان يبدو وكانه حقا يجري -
هذه الطريقة كانت تستعمل قديما لصنع الرسوم المتحركة وافلام الشريط حيث نجد اللقطات عبارة عن صور متتالية
اترككم لتجربة هذا الكود الجميل
لقد قمت بصنع صفحة خاصة على استظافة حتى يتسنى للجميع رؤيتها
هذا هو الرابط
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
*-*-*-*-*-*-*-*-*-*-*-*-*
المهم هذاهو الكود المستعمل
كود:
<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0;}
#logo {position: relative;}
.horse {
width: 469px; height: 54px;
background: url(http://www.google.co.in/logos/2012/muybridge12-hp-f.jpg);
}
.frame {position: absolute; left: 0; top: 0; z-index: 1;}
/*Clicking the label will select the checkbox which will be used to
trigger the animation of the horses*/
#play_button:checked ~ .horse {
-webkit-animation: horse-ride 0.5s steps(12, end) infinite;
-webkit-animation-delay: 2.5s;
-moz-animation: horse-ride 0.5s steps(12, end) infinite;
-moz-animation-delay: 2.5s;
/*Lets add a pre-anim which will start slowly and merge into the fast animation*/
background-position: -2412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
/*Hide the play image*/
#play_button:checked ~ #play_image img{
left: -68px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
/*804px is the width of the image with 12 horse frames
steps are used in the animation to have the best animation effect
it will position the horse frames accurately in the boxes instead of
tweening it px by px all the way through*/
@-webkit-keyframes horse-ride {
0% {background-position: 0 0;}
100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
0% {background-position: 0 0;}
100% {background-position: -804px 0;}
}
#play_button {display: none;}
#play_label {
width: 67px; height: 54px;
display: block;
position: absolute; left: 201px; top: 54px; z-index: 2;
}
#play_image {position: absolute; left: 201px; top: 54px; z-index: 0;
overflow: hidden; width: 68px; height: 55px;
}
#play_image img {position: absolute; left: 0; top: 0;}
</style>
</head>
<body>
<div id="logo">
<div class="frame">
<img src="https://www.google.com/logos/2012/muybridge12-hp-v.png" />
</div>
<!-- The play button now -->
<label for="play_button" id="play_label"></label>
<input type="checkbox" id="play_button" name="play_button" />
<!-- The image for the play button
The sibling selector works in the forward direction only.-->
<span id="play_image">
<img src="http://www.google.co.in/logos/2012/muybridge12-hp-p.jpg" />
</span>
<div class="horse"></div>
<div class="horse"></div>
<div class="horse"></div>
</div>
</body>
</html>انتهـــــــــــــــــــــــــــــــــــــى
التعديل الأخير:
