📚Create 🆕 Programmer🔝©
#transition
<!DOCTYPE html>
<html>
<head>
<style>
body{
color:#ffe;
background: #000;
text-align:center;
}
div {
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s;
}
div:hover {
width: 150px;
}
.div1{
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s, height 4s;
}
.div1:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>
بالبدايه استخدمنه خاصية هوفر ويه الروابط يعني من نوكف ع رابط يتغير لونة هسه نكدرنستخدم خاصية هوفر ويه الدف يعني نخلي الدف يتحرك ويتغير حجمه من نوكف عليه مثلا هذا الدف حجمه 50 من اوكف عليه راح يصير حجمه 150 والوقت مال تحريك الحجم حددته بخاصية الترانزشن ثانيتين
</p>
<div>اضغط هنا وسوف يتحرك بالعرض </div>
<br>
<br>
<div class="div1">اضغط هنا وسوف يتحرك بالطول والعرض </div>
</body>
</html>
<html>
<head>
<style>
body{
color:#ffe;
background: #000;
text-align:center;
}
div {
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s;
}
div:hover {
width: 150px;
}
.div1{
width: 50px;
height: 50px;
background: #4d4dff;
transition: width 2s, height 4s;
}
.div1:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>
بالبدايه استخدمنه خاصية هوفر ويه الروابط يعني من نوكف ع رابط يتغير لونة هسه نكدرنستخدم خاصية هوفر ويه الدف يعني نخلي الدف يتحرك ويتغير حجمه من نوكف عليه مثلا هذا الدف حجمه 50 من اوكف عليه راح يصير حجمه 150 والوقت مال تحريك الحجم حددته بخاصية الترانزشن ثانيتين
</p>
<div>اضغط هنا وسوف يتحرك بالعرض </div>
<br>
<br>
<div class="div1">اضغط هنا وسوف يتحرك بالطول والعرض </div>
</body>
</html>