DeletedUser
Guest
Chapter 4
animation
كيف اخلي النص متحرك في صفحة الاتش تي ام ال (html)
اولا لازم تكون فاهم الشرح الموجود في شابتر 3 الي نزلته قبل 3 ايام لاننا راح نستخدم الستايل شيت بموضوعنا اليوم
يله نبدا
بسم الله
animation
كيف اخلي النص متحرك في صفحة الاتش تي ام ال (html)
اولا لازم تكون فاهم الشرح الموجود في شابتر 3 الي نزلته قبل 3 ايام لاننا راح نستخدم الستايل شيت بموضوعنا اليوم
يله نبدا
بسم الله
HTML:
<html>
<body>
<h1>Abu.Rajih</h1>
</body>
</html>
<style>
body
{
هنا قم بوضع مميزات البودي وهي حسب ذوقك
}
h1
{
animation: salim 5s linear infinite;
}
@keyframes salim
{
0% {color:red;}
100%{color:black;}
}
</style>
animation: salim 5s linear infinite;
animation: = اتريبوت او ميزة ولازم تكتب بشكل صحيح
salim = اسم الحركه (تقدر تكتب اي شي)
5s = مدة الحركة تقدر وهي بالثانيه ( انا خليتها 5 ثواني)
linear infinite = حركة لا نهائية ( لو مثلا تبي الحركة تطلع لك 4 مرات تغيرها الى 4)
بهذا الشكل
animation: salim 5s 4;
ويليها لازم تكتب هذي وهي عباره عن حركات
@keyframes salim
{
0% {هنا تكتب اي مميزات}
100%{هنا تكتب اي مميزات}
وهذا من تصميمي عسى يفيدكم
HTML:
<html>
<body>
<h1>Abu.Rajih</h1>
</body>
</html>
<style>
body
{
background:url(https://pingmod.com//wp-content/uploads/2017/11/AAEAAQAAAAAAAAk8AAAAJGQ4ZDI3ZTFiLTk3MmMtNDM3Mi05ZjJkLWNhYzVjODJkZjA2Zg.jpg);
background-size:100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
h1
{
color:blue;
font-family:vivaldi;
font-size: 60px;
text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black;
text-align:center;
/* الانيميشن يبدا من هنا تمام؟ */
animation: salim 5s linear infinite;
}
@keyframes salim
{
0% {color:red;}
100%{color:black;}
}
</style>
غداً ان شاء الله راح ابدا بالجافا سكريبت
التعديل الأخير بواسطة المشرف: