< درس > بزوغ القمر - CSS3 - (إنتبة شعر راسك لا يوقف)

هل تخيلت يوما ما من خلال متابعتك لتطور الـcss3 انها ستكون أشبة ما يكون بالرسوم المتحركة؟!

تعودنا على css3 انها تفاعليه عند مرور الماوس على رابط او صورة

لكن أنها تتحرك من دون ان تمر بماوسك على شيء …. هذا جداً مذهل

درسنا هذا اليوم بإستخدام الدالة animation

و سنقوم بتصوير منظر لبزوغ القمر

أي انتهاء النهار و بداية الليل حيث ستكون الخلفية مائلة للأزرق

و عند بزوغ القمر و إختفاء بريقة شيأً فشيء تتحول للأسود

بالطبع لوحة فينة إحترافية يصعب عليك تصوريها بالـcss إن لم تشاهد إمكانيات الدالة animation من قبل !


في هذا الدرس لا نحتاج الإ لملف واحد فقط لا غير هل تتصور ذلك؟!

بالعادة في مثل هذة الدورس تحتاج من 3 الى اربع ملفات


لكن انت هنا في مدونة مستحيل حيث لا معنى للمستحيل

نحتاج فقط لإنشاء ملف HTML و سنقوم بتضمين ملف الستايل بداخل ملف HTML

أولاً ملف CSS سيكون على النحو التالي

رمز Code:
body {
background: #133d48;
-webkit-animation: sky-to-black 5s ease forwards;
-moz-animation: sky-to-black 5s ease forwards;
-ms-animation: sky-to-black 5s ease forwards;
}
.ground {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background: black;
-webkit-animation: ground-to-black 5s ease forwards;
-moz-animation: ground-to-black 5s ease forwards;
-ms-animation: ground-to-black 5s ease forwards;
}
.moon {
width: 100px;
height: 100px;
position: absolute;
background: white;
border-radius: 50px;
box-shadow: 0 0 20px white;
left: 50%;
top: 80%;
margin: 0 -50px;
-webkit-animation: rising-sun 5s ease forwards;
-moz-animation: rising-sun 5s ease forwards;
-ms-animation: rising-sun 5s ease forwards;
}

.ground, .moon {
text-indent: -9999px;
overflow: hidden;
}

@-moz-keyframes rising-sun {
0% {
top: 80%;
box-shadow: 0 0 20px 100px white;
}
100% {
top: 15%;
box-shadow: 0 0 150px 20px white;
}
}
@-webkit-keyframes rising-sun {
0% {
top: 80%;
box-shadow: 0 0 20px 100px white;
}
100% {
top: 15%;
box-shadow: 0 0 150px 20px white;
}
}
@-ms-keyframes rising-sun {
0% {
top: 80%;
box-shadow: 0 0 20px 100px white;
}
100% {
top: 15%;
box-shadow: 0 0 150px 20px white;
}
}

@-moz-keyframes sky-to-black {
0% {
background-color: #133d48;
}
100% {
background-color: black;
}
}
@-moz-keyframes ground-to-black {
0% {
background-color: #211d11
}
100% {
background-color: black;
}
}
@-webkit-keyframes sky-to-black {
0% {
background-color: #133d48;
}
100% {
background-color: black;
}
}
@-webkit-keyframes ground-to-black {
0% {
background-color: #211d11
}
100% {
background-color: black;
}
}
@-ms-keyframes sky-to-black {
0% {
background-color: #133d48;
}
100% {
background-color: black;
}
}
@-ms-keyframes ground-to-black {
0% {
background-color: #211d11
}
100% {
background-color: black;
}
}
لتسهل المهمة سأقوم بتضمين ملف CSS داخل ملف HTML عن طريق الدالة

رمز Code:


في هذا الفراغ سنكتب أكواد ملف الستايل




بذلك يتكون لنا ملف الـHTML و سيكون كالتالي

رمز Code:




body {
background: #133d48;
-webkit-animation: sky-to-black 5s ease forwards;
-moz-animation: sky-to-black 5s ease forwards;
-ms-animation: sky-to-black 5s ease forwards;
}
.ground {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background: black;
-webkit-animation: ground-to-black 5s ease forwards;



-moz-animation: ground-to-black 5s ease forwards;
-ms-animation: ground-to-black 5s ease forwards;
}
.moon {
width: 100px;
height: 100px;
position: absolute;
background: white;
border-radius: 50px;
box-shadow: 0 0 20px white;
left: 50%;
top: 80%;
margin: 0 -50px;
-webkit-animation: rising-sun 5s ease forwards;
-moz-animation: rising-sun 5s ease forwards;
-ms-animation: rising-sun 5s ease forwards;
}

.ground, .moon {
text-indent: -9999px;
overflow: hidden;
}

@-moz-keyframes rising-sun {
0% {
top: 80%;
box-shadow: 0 0 20px 100px white;
}
100% {
top: 15%;
box-shadow: 0 0 150px 20px white;
}
}
@-webkit-keyframes rising-sun {
0% {
top: 80%;
box-shadow: 0 0 20px 100px white;
}
100% {
top: 15%;
box-shadow: 0 0 150px 20px white;
}
}
@-ms-keyframes rising-sun {
0% {
top: 80%;
box-shadow: 0 0 20px 100px white;
}
100% {
top: 15%;
box-shadow: 0 0 150px 20px white;
}
}

@-moz-keyframes sky-to-black {
0% {
background-color: #133d48;
}
100% {
background-color: black;
}
}
@-moz-keyframes ground-to-black {
0% {
background-color: #211d11
}
100% {
background-color: black;
}
}
@-webkit-keyframes sky-to-black {
0% {
background-color: #133d48;
}
100% {
background-color: black;
}
}
@-webkit-keyframes ground-to-black {
0% {
background-color: #211d11
}
100% {
background-color: black;
}
}
@-ms-keyframes sky-to-black {
0% {
background-color: #133d48;
}
100% {
background-color: black;
}
}
@-ms-keyframes ground-to-black {
0% {
background-color: #211d11
}
100% {
background-color: black;
}
}






I see a bad moon rising
I see trouble on the way




I see earthquakes and lightnin’
I see bad times today








بعد التطبيق هذة هي النتيجة



مصدر الموضوع من مدونتي و لا احلل ان احد ينقلة من دون ذكر المصدر


درس بزوغ القمر بالـCSS3 | مدونة مستحيل