خلفيه متحركه

edisonٰ̲ۦ, • منذ 4 سنوات

يمديني اسوي للموقع خلفيه متحركه او ميصير اساسا؟

كلمات دليلية: صوره

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

الإجابات (1)

tala • منذ 4 سنوات

تقدر عن طريق شي اسمو transition في لغة الcss ورح اعطيك الكود الي يقدر يحرك الصورة وتحطه داخل الhead :

 

.transition {
  position:relative;
  height:300px;
  width:900px;
  margin:0 auto;
}
.transition img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.transition img.top:hover {
  opacity:0;
}
 
طبعا ولازم تعمل كلاس داخل ال بودي وتسميه مثل الاسماء الي مسميتها انا وتحط الكلاسات داخل ديف اكيد
 
وهذا الشغل الي داخل البودي:
 

<div class="container">

<div class="transition">

 <img class="bottom" src="img.png"width="900" height="300"/>

  <img class="top" src="img1.jpg"width="900" height="300"/>

  </div>

  </div>

 

طبعا انا عاملتها لصورتين فقط وبامتكانك تزيد الصور قد ما تقدر  داخل البودي (body)وتلعب بتحرك الصورة دائما او فقط عندما يوضع المؤشر عليها مثل ما انا عاملة

 

 

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !